checkbox的使用总结,判断是否选中

Posted 2020-10-14

方法一：

if ($("#checkbox-id").get(0).checked) {

    // do something

}

方法二：

if($(‘#checkbox-id‘).is(‘:checked‘)) {

    // do something

}

方法三：

if ($(‘#checkbox-id‘).attr(‘checked‘)) {

    // do something

}
方法四：

if ($(‘#checkbox-id‘).prop("checked")) {

    // do something

}

方法五：//属于原生js的方法，存在一点弊端

if (ele.checked) {
     // do something
 }

一,$(ele).is(":checked")

1. function IsSelect(ele){
2. //判断checkbox是否被选中  
3. if($(ele).is(":checked")){      
4. alert(‘选中‘); 
5. alert($(ele).val()) 
6. }  
7. else{       
8. alert(‘未选中‘);  
9. }
10. }

二,$(ele).prop("checked")

1. //用jquery全选所有class为listbox的checkbox  
2. $(".listbox").prop("checked", true);  
3. //用jquery取消所有class为listbox的checkbox的选中  
4. $(".listbox").prop("checked", false);

 

三，使用 attr 方法设置选择。

1. $(function(){
2.     var checkbox = $("input[type=‘checkbox‘]");
3.     //全选
4.     $(‘#select-all‘).click(function(){
5.         checkbox.attr(‘checked‘, true);
6.     });
7.     //反选
8.     $(‘#select-reverse‘).click(function(){
9.         checkbox.each(function(i, dom){
10.             if ( $(dom).attr(‘checked‘) ) {
11.                 $(dom).removeAttr(‘checked‘);
12.             } else {
13.                 $(dom).attr(‘checked‘, ‘checked‘);
14.             }
15.         });
16.     });
17. });

四，对于jQuery 1.6.0+ 的版本，可以使用prop方法来设置是否选中。

1. $(function(){
2.     var checkbox = $("input[type=‘checkbox‘]");
3.     //全选
4.     $(‘#select-all‘).click(function(){
5.         checkbox.prop("checked", true);
6.     });
7.     //反选
8.     $(‘#select-reverse‘).click(function(){
9.         checkbox.prop("checked", function(index, attr){
10.             return !attr;
11.         });
12.     });
13. });

五，jQuery中attr和prop方法的区别

rop是jquery1.6新增的方法，其与attr的用法极为相似。由于不理解他们的根本区别，难免产生离奇的BUG。
通过分析attr和prop的源码，得知：
attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。
而prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。