各种选择框jQuery的选中方法(实例讲解)


Posted in jQuery onJune 27, 2017

select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option

chekbox的选中方法:$("[value=check1"]:checkbox).attr("checked",true);

radio的选中方法:$("[value=radio2"]:radio).attr("checked",true);

以上是简写,重要的是看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-4</title>
<style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--  引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 $(function(){
   //设置单选下拉框选中
   $("input:eq(0)").click(function(){
      $("#single option").removeAttr("selected"); //移除属性selected
      $("#single option:eq(1)").attr("selected",true); //设置属性selected
   });
   //设置多选下拉框选中
   $("input:eq(1)").click(function(){
      $("#multiple option").removeAttr("selected"); //移除属性selected
      $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
      $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
   });
   //设置单选框和多选框选中
   $("input:eq(2)").click(function(){
      $(":checkbox").removeAttr("checked"); //移除属性checked
      $(":radio").removeAttr("checked"); //移除属性checked
      $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
      $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
      $("[value=radio2]:radio").attr("checked",true);//设置属性checked
   });
 });
 //]]>
 </script>
</head>
<body>
  <input type="button" value="设置单选下拉框选中"/>
  <input type="button" value="设置多选下拉框选中"/>
  <input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
 <option>选择1号</option>
 <option>选择2号</option>
 <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
 <option selected="selected">选择1号</option>
 <option>选择2号</option>
 <option>选择3号</option>
 <option>选择4号</option>
 <option selected="selected">选择5号</option>
</select>

<br/><br/>


<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1" name="a"/> 单选1
<input type="radio" value="radio2" name="a"/> 单选2
<input type="radio" value="radio3" name="a"/> 单选3
</body>
</html>

以上这篇各种选择框jQuery的选中方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
基于jQuery封装的分页组件
Jun 26 #jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
jQuery实现frame之间互通的方法
Jun 26 #jQuery
jQuery回调方法使用示例
Jun 26 #jQuery
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php 页面执行时间计算代码
2008/12/04 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php 文件上传实例代码
2012/04/19 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python选择排序算法实例总结
2015/07/01 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python实现的建造者模式示例
2018/08/06 Python
Django实现文件上传和下载功能
2019/10/06 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
环保建议书300字
2014/05/14 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
公司开除员工通知
2015/04/22 职场文书
2015年话务员工作总结
2015/04/29 职场文书
学校百日安全活动总结
2015/05/07 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书