jquery複選框 選中事件 及其判斷是否被選中_經常使用筆記

checkbox的change事件可監聽是否選中狀態，也可添加onclick事件。

var dom=$('.checkbox');

1. 判斷checkbox是否被選中
    
   var dom=$('.checkbox');

    dom.prop('checked');

   //實現控制checkbox是否選中狀態:  切換到初始狀態
　　if (!(dom.prop('checked'))) {
 　　dom.prop('checked',!(dom.prop('checked')));
 　　dom.prop('checked',dom.prop('checked'));
　　}else{
 　　 dom.prop('checked',dom.prop('checked'));
 　　 dom.prop('checked',!(dom.prop('checked')));
　　}

2. 判斷checkbox是否被選中
 
　　dom.is(':checked')

3. 設置是否選中狀態
 
 dom.prop('checked'，true);

 dom.prop('checked'，false);

//全選按鈕
$(document).on('click', 'th input:checkbox', function () {
 var that = this;
 $(this).closest('table').find('tr > td:first-child input:checkbox')
 .each(function () {
 this.checked = that.checked;
 //$(this).closest('tr').toggleClass('selected');
 });
});

/**
 * 獲取選中的CheckBox值
 * @param Domid 包含checkBox元素的容器id
 * @param delimiters 值的分隔符如：'|',','
 * @returns {string} 返回字符串
 */
bingjs.get_checkbox_value = function (Domid, delimiters) {
 var Id_string = '';//選中的值
 $('#' + Domid).find('tr > td:first-child input:checkbox')
 .each(function () {
 //this與$(this)的區別 一個是dom一個是jquery對象
 if (this.checked == true) {
 Id_string += $(this).val() + delimiters;

 }
 });
 //console.info(Id_string.indexOf(delimiters));
 //console.info(Id_string);
 if (Id_string.lastIndexOf(delimiters)) {
 Id_string = Id_string.substr(0, Id_string.length - 1);
 }
 return Id_string;
}

1.經過 attr('checked','checked') 來設置checkbox時，重複點擊，雖然checked屬性設置正確，可是checkbox沒有被勾選 ，以下代碼：（代碼是全選功能）

$('#ckAll').click(function(){
            if($('#ckAll ').attr('checked') == 'checked'){
                $('#ckAll').removeAttr('checked');
            }else{
                $('#ckAll').attr('checked','checked');
            }
            if($('#ckAll').attr('checked') == 'checked'){
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).attr('checked','checked');
                });
            }else{
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).removeAttr('checked');
                });
            }
        }); 

2. 換成 prop('checked',true) ，當ckAll被選中時，全部列表checkbox都會被選中

$('#ckAll').click(function(){
            if($('#ckAll').prop('checked')){
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).prop('checked',true);
                });
            }else{
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).prop('checked',false);
                });
            }
        });