各种选择框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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现倒计时功能完整示例
Jun 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
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
javascript 数据存储的常用函数总结
2017/06/01 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
Python中类的继承代码实例
2014/10/28 Python
python实现微信远程控制电脑
2018/02/22 Python
python奇偶行分开存储实现代码
2018/03/19 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python timeit模块原理及使用方法
2020/10/10 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
护理专业的自荐信
2013/10/22 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
社区十八大感言
2014/01/19 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
品质主管岗位职责
2014/03/16 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
讲文明倡议书
2015/04/29 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers