Question

checkAll单击功能有效，但uncheckAll单击功能不起作用。任何人都会看到是什么阻止它取消选中所有选中的复选框。

$('#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();          
});

Answer 1

你的问题就在这里：

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

当你这样说时：

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

在调用id 时，您正在将回调函数绑定到uncheckAll .click 的元素;当您更改id时，您不会更改已绑定的回调。您可以切换为使用live或delegate绑定click事件或（更好的恕我直言）使用两个单独的按钮并根据需要隐藏/显示它们：

Answer 2

这个简单的行应该取消选中所有复选框：

$('#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.

Answer 3

事件click绑定到DOM元素，而不是现在或将来的每个css匹配，因此在第一次运行时，只有#checkAll会绑定，后者不会被使用在所有

尝试另一种方式 - 通过在check元素上使用切换

$('#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()将两个在后续点击后交替运行的函数作为参数

Answer 4

尝试使用live（）而不是click（），因为你正在摆脱/重置你绑定动作的id，live（）可能会更好。

取消选中所有复选框

4 个答案: