无法选中/取消选中 javascript/jquery 中的复选框

Question

我有一个复选框，它将切换 html 表单上的一些其他复选框：

<input type="checkbox" name="selector" onclick="toggle_all(this);"/>

<script language="javascript">
function toggle_all(source) {
    var checkboxes = $(":input[name^='form[r']");
    if($(source).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
    alert('done');
}
</script>

第一次单击“选择器”复选框时，所有名称以“form[r”开头的复选框都会被选中。然后，当“选择器”复选框未选中时，所有其他复选框也未选中。从那时起，选中/取消选中“选择器”复选框不会影响其他复选框。代码正在运行，因为 alert('done') 出现了。这里有什么问题？

Answer 1

我会建议改进。更改 HTML，为所有复选框添加一些类：

<input class="check" type="checkbox" name="form[r]">

还有 JS：

function toggle_all(source) {
    $(".check").prop('checked', source.checked);
}

http://jsfiddle.net/tFv3G/

原因是通过属性搜索元素比通过类名慢得多。而且可读性也较差。

Answer 2

选择器中的方括号需要转义

改变

var checkboxes = $(":input[name^='form[r']");

到

var checkboxes = $(":input[name^='form\[r']");

Answer 3

我建议使用此代码来选择/取消选择所有复选框：

$('input#select-all').change(function(){
  var checked = $(this).prop('checked');
  $(":input[name^='form[r']").prop('checked', checked);
});