各种选择框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 21 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php返回json数据函数实例
2014/10/09 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python实现归并排序算法
2018/11/22 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python文件读取失败怎么处理
2020/06/23 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
AJax面试题
2014/11/25 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
上课迟到检讨书
2014/01/19 职场文书
幼儿教师工作感言
2014/02/14 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
学术研讨会主持词
2015/07/04 职场文书
Golang 实现WebSockets
2022/04/24 Golang