各种选择框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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现穿梭框功能
Jan 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
tensorflow更改变量的值实例
2018/07/30 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Django REST 异常处理详解
2020/07/15 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
校长岗位职责
2013/11/26 职场文书
人力资源总监工作说明
2014/03/03 职场文书
安全演讲稿大全
2014/05/09 职场文书
市场调查策划方案
2014/06/10 职场文书
自荐信格式范文
2015/03/04 职场文书
个人年度总结报告
2015/03/09 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android