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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP模板解析类实例
2015/07/09 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
JsDom 编程小结
2011/08/09 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
总结js函数相关知识点
2018/02/27 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
js new Date()实例测试
2019/10/31 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
详解Django中的过滤器
2015/07/16 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
django 外键model的互相读取方法
2018/12/15 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
焊接专业毕业生求职信
2013/10/01 职场文书
2013年高中生自我评价
2013/10/23 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
投标保密承诺书
2014/05/19 职场文书
党员四风剖析材料
2014/08/27 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2014年资料员工作总结
2014/11/18 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书