各种选择框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 DOM节点的遍历方法小结
Aug 15 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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实现无限级分类(不使用递归)
2015/10/22 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python删除n行后的其他行方法
2019/01/28 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
旅游网创业计划书
2014/01/31 职场文书
致200米运动员广播稿
2014/02/06 职场文书
自主招生推荐信范文
2014/05/10 职场文书
施工安全生产承诺书
2014/05/23 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
银行竞聘报告范文
2014/11/06 职场文书
清明节随笔
2015/08/15 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
python实现的web监控系统
2021/04/27 Python
springboot读取nacos配置文件
2022/05/20 Java/Android