Question

＆＃34;检查全部＆＃34; /＆＃34;取消选中所有＆＃34;按钮让我检查或取消选中表单中的所有复选框。＆＃34;继续......＆＃34;只要选中一个，多个或所有复选框，按钮就会激活。

只要我手动勾选复选框，但是当我使用＆＃34;检查所有＆＃34;按钮。在这种情况下，＆＃34;继续......＆＃34;按钮保持不活动状态。

我尝试了几个其他类似解决方案的解决方案。特别是this one非常有趣，但我无法根据自己的需要改变它。

一些帮助会很棒。

我有以下HTML代码。

<form id="container">
     <input type="button" class="check" value="check all">
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <button type="submit" id="proceedBut">proceed...</button>
</form>

使用以下jquery代码

$('.check:button').click(function(){
     var checked = !$(this).data('checked');
     $('input:checkbox').prop('checked', checked);
     $(this).val(checked ? 'uncheck all' : 'check all' )
     $(this).data('checked', checked);
});

var checkBoxes = $('#container .cb');
checkBoxes.change(function () {
    $('#proceedBut').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
$('#container .cb').change();

Answer 1

将checkBoxes.first().change()添加到.check:button的点击事件中，以触发第一个.cb的更改事件，如下所示。

＆＃13;

var checkBoxes = $('#container .cb');

$('.check:button').click(function() {
  var checked = !$(this).data('checked');
  $('input:checkbox').prop('checked', checked);
  $(this).val(checked ? 'uncheck all' : 'check all');
  $(this).data('checked', checked);

  checkBoxes.first().change();
});

checkBoxes.change(function() {
  $('#proceedBut').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.first().change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="container">
     <input type="button" class="check" value="check all">
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <button type="submit" id="proceedBut">proceed...</button>
</form>

＆＃13;

Answer 2

单击check all按钮时，

checkboxes.change不会触发，在.check：button.click（）事件中添加一行

$('.check:button').click(function(){
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).val(checked ? 'uncheck all' : 'check all' )
    $(this).data('checked', checked);
    $('#proceedBut').prop('disabled', checkBoxes.filter(':checked').length < 1);
});

选中一个，部分或全部复选框并激活继续按钮不起作用

2 个答案: