各种选择框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加载单文件vue组件的方法
Jun 20 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
星际玩家的三大定律
2020/03/04 星际争霸
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python学习 流程控制语句详解
2016/06/01 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
使用Python 统计高频字数的方法
2019/01/31 Python
python logging模块的使用总结
2019/07/09 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python之列表推导式的用法
2019/11/29 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
开业典礼主持词
2014/03/21 职场文书
国际贸易专业求职信
2014/06/04 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
博士论文答辩开场白
2015/06/01 职场文书
外出培训学习心得体会
2016/01/18 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript