Javascript选择/取消选择表单中的所有复选框

Question

我想使一个javascript选择/取消选择所有复选框。

这是我的脚本，但是不起作用：

<form id="labels">
<input type="checkbox">
<input type="checkbox" id="select_all">
</form>
<script>
$('#select_all').click(function()
{
        if($("#select_all").is(':checked'))
        {
            $("form#labels input[type='checkbox']").prop('checked', false);
        }else{
            $("form#labels input[type='checkbox']").prop('checked', true);
        }
    });
</script>

Answer 1

使用.change事件-并引用this -也可以将其缩短很多：

$('#select_all').change(function() {
    $("form#labels input[type='checkbox']").prop('checked', this.checked);
});

演示： http ： //jsfiddle.net/om37znud/

Answer 2

您应该交换true和false布尔值。

 $('#select_all').click(function() { if($("#select_all").is(':checked')) { $("form#labels input[type='checkbox']").prop('checked', true); }else{ $("form#labels input[type='checkbox']").prop('checked', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="labels"> <input type="checkbox" /> <input type="checkbox" id="select_all" /> </form> 

也可以简化为

$('#select_all').click(function(){
  $("#labels input[type='checkbox']").prop('checked', this.checked);
});

 $('#select_all').click(function(){ $("#labels input[type='checkbox']").prop('checked', this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="labels"> <input type="checkbox" /> <input type="checkbox" id="select_all" /> </form>