功夫码

js如何获取checkbox的选中或设置选中方法

晓峰 时间:2019-09-01 00:36:38 阅读:13

js如何获取checkbox的选中或设置选中方法

方法一:

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

方法二:

$('#checkbox-id').is(':checked')

方法三:

$('#checkbox-id').attr('checked')

方法四:

$('#checkbox-id').prop("checked")

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

ele.checked

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

 function IsSelect(ele){ 

     //判断checkbox是否被选中   

     if($(ele).is(":checked")){      

          alert('选中'); 

          alert($(ele).val()) 

      }  

          else{       

          alert('未选中');  

      }

   }

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

    //用jquery全选所有class为listbox的checkbox 

    $(".listbox").prop("checked", true);  

    //用jquery取消所有class为listbox的checkbox的选中  

    $(".listbox").prop("checked", false);


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

$(function(){ 

     var checkbox = $("input[type='checkbox']"); 

     //全选

     $('#select-all').click(function(){ 

         checkbox.attr('checked', true); 

     });

    //反选  

    $('#select-reverse').click(function(){ 

        checkbox.each(function(i, dom){

            if ( $(dom).attr('checked') ) {

                $(dom).removeAttr('checked');

            } else {

                $(dom).attr('checked', 'checked');

            }

        });

    });

});


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

$(function(){ 

    var checkbox = $("input[type='checkbox']"); //全选    

    $('#select-all').click(function(){ 

        checkbox.prop("checked", true);

    }); 

     //反选 

    $('#select-reverse').click(function(){ 

        checkbox.prop("checked", function(index, attr){return !attr;});

    });

  });


五,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对象的一个属性。


本文来源:功夫码(gongfuma.com)

声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有,未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

回到顶部