通过选中一个复选框来切换组复选框

时间:2015-12-28 17:51:16

标签: javascript jquery checkbox

我正在尝试选中一个复选框,并让该操作检查表单中的其余复选框。我怎么能用类来做呢?

<script>
    $(".global").on("click", function() {
        var all = $(this);
        $('.checkbtn').each(function() { 
            $(this).prop("checked", all.prop("checked"));
        });
    });
</script>

<div>
    <input type="checkbox" class ="global" id="select-all" name="selectAll" value=""/> All
    <input type="checkbox" class ="checkbtn" name="practice" value=""/> 1
    <input type="checkbox" class ="checkbtn" name="filename" value=""/> 2
    <input type="checkbox" class ="checkbtn" name="comment" value=""/> 3
</div>

1 个答案:

答案 0 :(得分:1)

您不必要地使此任务复杂化。走这条路:

$(function() {
  $(".global").on("change", function() {
    var state = this.checked;
    $('.checkbtn').prop("checked", state);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="global" id="select-all" name="selectAll" value="" />All
<input type="checkbox" class="checkbtn" name="practice" value="" />1
<input type="checkbox" class="checkbtn" name="filename" value="" />2
<input type="checkbox" class="checkbtn" name="comment" value="" />3