各种选择框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中关于bind()方法的使用技巧分享
Mar 30 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 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新手上路(九)
2006/10/09 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
会计学毕业生求职信
2014/06/25 职场文书
森林防火宣传标语
2014/06/27 职场文书
农行心得体会
2014/09/02 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
催款函范本大全
2015/06/24 职场文书
活动简报范文
2015/07/22 职场文书