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”开头的所有复选框。然后，当取消选中“选择器”复选框时，也会取消选中所有其他复选框。从那时起，选中/取消选中“selector”复选框不会影响其他复选框。代码正在运行，因为警报（“已完成”）显示出来。这有什么不对？

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);
});

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

3 个答案: