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

方法一：

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")

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