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對象的一個屬性。