各种选择框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日期范围选择器附源码下载
May 23 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现动态向上滚动
Dec 21 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 星际争霸
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
自我鉴定 电子商务专业
2014/01/30 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
JavaScript实现栈结构详细过程
2021/12/06 Javascript
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript