各种选择框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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery实现简单评论区功能
Oct 26 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
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
DOM事件探秘篇
2017/02/15 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
Vue组件化开发思考
2018/02/02 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
教你安装python Django(图文)
2013/11/04 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python实现元素等待代码实例
2019/11/11 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python中threading开启关闭线程操作
2020/05/02 Python
会计实习生自我鉴定
2013/12/12 职场文书
房屋公证委托书
2014/04/03 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
工地宣传标语
2014/06/18 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年团委工作总结
2014/11/13 职场文书
大学军训通讯稿
2015/07/18 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript