电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: JS----checked----checked选中和未选中的获取（1） [打印本页]

作者: look_w 时间: 2019-5-13 10:15 标题: JS----checked----checked选中和未选中的获取（1）

全选、全不选、反选功能

html代码
<form action="" id="oForm" name="myForm">
      <input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br>
      <input type="checkbox" name="hobby" id="zuqiu" value="zuqiu" >足球<Br>
      <input type="checkbox" name="hobby" id="paiqiu" value="paiqiu">排球<Br>
      <input type="checkbox" name="hobby" id="wqiu" value="wqiu">网球<Br>
      <input type="checkbox" name="hobby" id="biqiu" value="biqiu">壁球<Br>
      <input type="checkbox" name="hobby" id="bpq" value="bpq">乒乓球<Br>
      <input type="checkbox" name="hobby" id="ymq" value="ymq">羽毛球<Br>
      <input type="button" name="all" id="all" value='全选'>
      <input type="button" name="allNo" id="allNo" value='全不选'>
      <input type="button" name="noCheck" id="noCheck" value='反选'>
  </form>

JS代码
function setVal(iNum){
      var aForm = document.getElementById("myForm");
      var aArr = aForm.hobby;
      for(var i=0;i<aArr.length;i++){
         if( iNum<0 ){
            aArr[i].checked = !aArr[i].checked;
         }else{
            aArr[i].checked = iNum;
         }
      }
}

设置选中
下边两种写法没有任何区别只是少了些代码而已
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:
// $("#cb1").prop("checked",true);//很简单就不说了哦
// $("#cb1").prop({checked:true}); //map键值对
// $("#cb1").prop("checked",function(){
return true;//函数返回true或false
});
//$("#cb1").prop("checked","checked");

为什么input checkbox有 checked='checked'还是没选中
如果用jQuery1.6+来写的话：
建议使用
$(element).prop('checked', true/false);
而不是
$(element).attr('checked', true/false);
其实也就相当于要使用：
element.checked = true/false;
而并不是
element.setAttribute('checked', true/false/'checked');

jquery判断checked的三种方法
.attr('checked'): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦

jQuery获取未选中的checkbox
$('input[type=checkbox]').not("input:checked");

jQuery获取选中的checkbox
$('input[type=checkbox]:checked');

jquery官网checked的用法
http://api.jquery.com/checked-selector/

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)