各种选择框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 Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
Zend Framework基本页面布局分析
2016/03/19 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
VBScript版代码高亮
2006/06/26 Javascript
jquery 插件开发备注
2010/08/27 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
应届生会计电算化求职信
2013/10/03 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
考研复习计划
2015/01/19 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
高中运动会广播稿
2015/08/19 职场文书
python中print格式化输出的问题
2021/04/16 Python
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android