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操纵Cookie实现购物车程序
Feb 15 Javascript
动态样式类封装JS代码
Sep 02 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
通过一次报错详细谈谈Point事件
May 17 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
JS实现打字游戏
Dec 17 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之第一天
2006/10/09 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
python列表返回重复数据的下标
2020/02/10 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python如何读写二进制数组数据
2020/08/01 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
会计专业的自荐信
2013/12/12 职场文书
小学生暑假感言
2014/02/06 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
白鹤梁导游词
2015/02/06 职场文书
欧元符号 €
2022/02/17 杂记