復選框切換所有選擇

Question

我有這個JavaScript代碼

    // Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    }
});

我有這個

<form action="" method="POST">    
Toggle All : &nbsp;&nbsp;
<input type="checkbox" name="select-all" id="select-all" />

然后在我的桌子上我有多個復選框

<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select

當我單擊全部切換時，它不會將復選框1選中到復選框4

我的JavaScript代碼出了什么問題。

謝謝！！ 我實際上想做一個函數，當在表單提交中選中它們時，將通過郵寄發送checkbox1-4的所有值。

Answer 1

只需這樣做。

$('#select-all').click(function(event) {
    $(':checkbox').prop("checked", this.checked);
});

您無需遍歷每個復選框即可全部選中。

演示版

如果您的腳本位於head標簽中，則將代碼包裝在dom中

$(document).ready(function() {
    $('#select-all').click(function(event) {
        $(':checkbox').prop("checked", this.checked);
    });
});