各种选择框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选择器特殊字符与属性空格问题
Aug 14 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery实现图片放大镜效果
Dec 23 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
Python装饰器基础详解
2016/03/09 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python实现词法分析器
2019/01/31 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
优秀教师先进事迹
2014/01/22 职场文书
清扬洗发水广告词
2014/03/14 职场文书
教师对学生的寄语
2014/04/03 职场文书
安全生产月演讲稿
2014/05/09 职场文书
工程款催款函
2015/06/24 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Python实现对齐打印 format函数的用法
2022/04/28 Python