jquery的checkbox,radio,select等方法小结


Posted in Javascript onAugust 30, 2016

1、checkbox日常jquery操作。 现在我们以下面的html为例进行checkbox的操作。

<input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4

全选和全部选代码:

<script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
      });
    });
  </script>

checkbox属性:

var val = $("#checkAll").val();// 获取指定id的复选框的值 
var isSelected = $("#checkAll").attr("checked"); // 判断id=checkAll的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false; 
$("#checkAll").attr("checked", true);// or 
$("#checkAll").attr("checked", 'checked');// 将id=checkbox_id3的那个复选框选中,即打勾 
$("#checkAll").attr("checked", false);// or 
$("#checkAll").attr("checked", '');// 将id=checkbox_id3的那个复选框不选中,即不打勾 
$("input[name=subBox][value=3]").attr("checked", 'checked');// 将name=subBox, value=3 的那个复选框选中,即打勾 
$("input[name=subBox][value=3]").attr("checked", '');// 将name=subBox, value=3 的那个复选框不选中,即不打勾 
$("input[type=checkbox][name=subBox]").get(2).checked = true;// 设置index = 2,即第三项为选中状态 
$("input[type=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值 
  alert($(this).val()); 
});

2、radio的jquery日常操作及属性 我们仍然以下面的html为例:

<input type="radio" name="radio" id="radio1" value="1" />1 
<input type="radio" name="radio" id="radio2" value="2" />2 
<input type="radio" name="radio" id="radio3" value="3" />3 
<input type="radio" name="radio" id="radio4" value="4" />4

radio操作如下:

$("input[name=radio]:eq(0)").attr("checked",'checked'); //这样就是第一个选中咯。
 //jquery中,radio的选中与否和checkbox是一样的。
$("#radio1").attr("checked","checked");
$("#radio1").removeAttr("checked");
$("input[type='radio'][name='radio']:checked").length == 0 ? "没有任何单选框被选中" : "已经有选中"; 
$('input[type="radio"][name="radio"]:checked').val(); // 获取一组radio被选中项的值 
$("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");// 设置value = 2的一项为选中 
$("#radio2").attr("checked", "checked"); // 设置id=radio2的一项为选中 
$("input[type='radio'][name='radio']").get(1).checked = true; // 设置index = 1,即第二项为当前选中 
var isChecked = $("#radio2").attr("checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false; 
var isChecked = $("input[type='radio'][name='radio'][value='2']").attr("checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;

3、select下拉框的日常jquery操作 select操作相比checkbox和radio要相对麻烦一些,我们仍然以下面的html为例来说明:

<select name="select" id="select_id" style="width: 100px;"> 
  <option value="1">11</option> 
  <option value="2">22</option> 
  <option value="3">33</option> 
  <option value="4">44</option> 
  <option value="5">55</option> 
  <option value="6">66</option> 
</select>

看select的如下属性:

$("#select_id").change(function(){             // 1.为Select添加事件,当选择其中一项时触发  
    //code... 
  }); 
  var checkValue = $("#select_id").val();          // 2.获取Select选中项的Value 
  var checkText = $("#select_id :selected").text();     // 3.获取Select选中项的Text  
  var checkIndex = $("#select_id").attr("selectedIndex");  // 4.获取Select选中项的索引值,或者:$("#select_id").get(0).selectedIndex; 
  var maxIndex = $("#select_id :last").attr("index");    // 5.获取Select最大的索引值,或者:$("#select_id :last").get(0).index; 
  /** 
   * jQuery设置Select的选中项 
   */ 
  $("#select_id").get(0).selectedIndex = 1;         // 1.设置Select索引值为1的项选中 
  $("#select_id").val(4);                  // 2.设置Select的Value值为4的项选中 
  /** 
   * jQuery添加/删除Select的Option项 
   */ 
  $("#select_id").append("<option value='新增'>新增option</option>");  // 1.为Select追加一个Option(下拉项)  
  $("#select_id").prepend("<option value='请选择'>请选择</option>");  // 2.为Select插入一个Option(第一个位置) 
  $("#select_id").get(0).remove(1);                   // 3.删除Select中索引值为1的Option(第二个) 
  $("#select_id :last").remove();                    // 4.删除Select中索引值最大Option(最后一个)  
  $("#select_id [value='3']").remove();                 // 5.删除Select中Value='3'的Option  
  $("#select_id").empty();       

  $("#select_id").find("option:selected").text(); // 获取select 选中的 text :

  $("#select_id").val(); // 获取select选中的 value:

   $("#select_id").get(0).selectedIndex; // 获取select选中的索引:

   $("#select_id").get(0).selectedIndex=index;//index为索引值

 //设置select 选中的value:
  $("#select_id").attr("value","Normal“);
  $("#select_id").val("Normal");
  $("#select_id").get(0).value = value;

 //设置select 选中的text,通常可以在select回填中使用
var numId=33 //设置text==33的选中!
var count=$("#select_id option").length;
 for(var i=0;i<count;i++) 
   {      if($("#select_id").get(0).options[i].text == numId) 
    { 
      $("#select_id").get(0).options[i].selected = true; 
      break; 
    } 
  }

通过上面的总结,应该对jquery的checkbox,radio和select有了一定的了解了吧,温故而知新,用多了就会变的熟练起来,即使有时候忘记了,也可以来翻一翻!

Javascript 相关文章推荐
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Vue异步加载about组件
Oct 31 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 #Javascript
AngularJS轻松实现双击排序的功能
Aug 30 #Javascript
jQuery simpleModal插件的使用介绍
Aug 30 #Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 #Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 #Javascript
浅谈javascript中的Function和Arguments
Aug 30 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP输入流php://input介绍
2012/09/18 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
详解js的六大数据类型
2016/12/27 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
自我鉴定写作要点
2014/01/17 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
元旦主持词开场白
2015/05/29 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android