Question

您好我正在尝试找出按钮更改其值的方式，并且还可以通过单击按钮来选中/取消选中所有复选框。

我也无法理解如何在DOM中解析。我在jsfiddle上尝试了一些东西，但无法实现它。有人可以帮助我。

这是链接。

Here is the jQuery code that I have written

> $(document).ready(function(){
>     $('.check:button').toggle(function(){
>         alert('inside toggle function');
>         $('input:checkbox').attr('checked',true);
>         $(this).val('uncheck all')
>     },function(){
>         $('input:checkbox').removeAttr('checked');
>         $(this).val('check all');        
>     }) })

jsfiddle

Answer 1

jQuery的toggle()功能在不久前已被弃用和删除，至少是您正在使用的toggle()版本。

您应该正在侦听change事件，并使用checked属性通过jQuery＆＃39; s prop()

切换其他复选框的状态

$('.selectall').on('change', function() {
    $('div input').prop('checked', this.checked);
});

FIDDLE

我使用的是on()，这需要比您在其中使用的jQuery更新版本的jQuery，您应该更新最新版本。

编辑：

用按钮做，你需要一个标志来跟踪状态，并创建你自己的切换

$('#selectAll').on('click', function () {
    var flag = !$(this).data('flag');

    $('#search_data input[type="checkbox"]').prop('checked', flag);

    $(this).data('flag', flag);
});

FIDDLE

Answer 2

DEMO

如果在任何时候至少有一个未经检查的复选框，那么您要检查所有，否则取消选中全部。并且您希望在更改任何单个复选框时重新计算。

$('#selectAll').on('click', function(){
    var numUnChecked = $(':checkbox:not(:checked)','#search_data').length;
    $(':checkbox', '#search_data').prop('checked',numUnChecked);
    $(this).val( numUnChecked ? 'uncheck all' : 'check all' );
});
$(':checkbox', '#search_data').on('change', function() {
    var numUnChecked = $(':checkbox:not(:checked)','#search_data').length;
    $('#selectAll').val( numUnChecked ? 'check all' : 'uncheck all' );
});

如何使用JQuery检查/取消选中表格内的所有元素

2 个答案:

编辑：