取消選中所有複選框

checkAll click功能起作用，但uncheckAll click功能不起作用。任何人看到什麼阻止它取消選中所有選中的複選框。取消選中所有複選框

$('#checkAll').click(function (e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').attr('checked','checked'); 
    $(this).removeAttr('id').attr('id','uncheckAll'); 
    $(this).find('strong').html('Uncheck All Checkboxes'); 
}); 

$('#uncheckAll').click(function (e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').removeAttr("checked"); 
    $(this).removeAttr('id').attr('id','checkAll'); 
    $(this).find('strong').html('Check All Checkboxes'); 
});

編輯：

我想這不過由於某種原因，它不會做任何事情。不知道爲什麼。

$('#dataTablePageList').delegate('#checkAll', 'click', function(e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').attr('checked',true); 
    $(this).removeAttr('id').attr('id','uncheckAll'); 
    $(this).find('strong').html('Uncheck All Checkboxes'); 
}); 

$('#dataTablePageList').delegate('#uncheckAll', 'click', function(e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').attr('checked',false); 
    $(this).removeAttr('id').attr('id','checkAll'); 
    $(this).find('strong').html('Check All Checkboxes'); 
});

編輯3：

$('#viewAll').live('click', function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(-1); 
    $(this).removeClass('viewAll').addClass('paginateRecords'); 
    $(this).find('strong').html('View Paginated Records'); 
    $('.pagination').hide(); 
}); 

$('#paginateRecords').live('click', function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(10); 
    $(this).removeClass('paginateRecords').addClass('viewAll'); 
    $(this).find('strong').html('View All Records'); 
    $('.pagination').show();   
});

來源

2011-08-06 Jeff Davidson

事件click被綁定到DOM元素，不是每一個CSS-比賽現已或者功能於未來，所以在第一次運行，只#checkAll將被綁定，而後者不是在所有

被用來嘗試另一種方式 - 通過檢查元素切換

$('#checkAll').toggle(function (e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').prop('checked',true); 
    $(this).find('strong').html('Uncheck All Checkboxes'); 
},function (e) { 
    e.preventDefault(); 
    $('#dataTablePageList :checkbox').prop('checked',false); 
    $(this).find('strong').html('Check All Checkboxes'); 
});

爲EDIT3：

$('#viewAll').toggle(function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(-1); 
    $(this).find('strong').html('View Paginated Records'); 
    $('.pagination').hide(); 
}, function(e) { 
    e.preventDefault(); 
    oTable.fnLengthChange(10); 
    $(this).find('strong').html('View All Records'); 
    $('.pagination').show();   
});

toggle()需要的參數，其在隨後的點擊之後交替運行兩個功能

來源

2011-08-06 03:53:12

我更新了我的帖子。 –

考慮改變方法，使用委託，這是非常醜陋的 –

您的回答非常好。 –

你的問題就在這裏：

$(this).removeAttr('id').attr('id','uncheckAll');

當你這樣說：

$('#uncheckAll').click(function (e) { ...

要綁定的回調函數，元素id的uncheckAll當時.click叫做;當您更改id時，您不會更改已綁定的回調。你可以切換到使用live或delegate結合您的click事件或（更好恕我直言）使用兩個單獨的按鈕，並隱藏/顯示他們需要：

來源

2011-08-06 03:51:43

我更新了我的代碼。 –

這個簡單的行應該取消所有複選框：

$('#dataTablePageList :checkbox').attr('checked',false);

和這個人會檢查所有：

$('#dataTablePageList :checkbox').attr('checked',true);

我沒有看到一個理由改變「checkAll/uncheckAll」元素的ID，以完成你想要的。

只是有這樣的事情：

<input type='checkbox' id='toggleAll' onclick="toggleAll(this);" /> 

function toggleAll(element){ 

    $('#dataTablePageList :checkbox').attr('checked',element.checked); 
}

Look at this quick example.

來源

2011-08-06 03:52:13 Icarus

我更新了我的帖子。 –

嘗試使用現場（），而不是點擊（），因爲你是除暴安良/重置你綁定動作的id，live（）可能會更好。

來源

2011-08-06 03:54:36

我更新了我的帖子。 –

取消選中所有複選框

回答

相關問題