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>