2

I have a checkbox which will toggle some other check boxes on a html form:

<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>

First time I click the "selector" check box, all check boxes with names starting "form[r" will be checked. Then when "selector" check box is unchecked, all others are unchecked as well. Since then checking/unchecking "selector" checkbox doesn't affect other checkboxes. The code is running because alert('done') shows up. What's wrong here?

4

3 に答える 3

2

改善を提案します。HTML を変更し、すべてのチェックボックスにいくつかのクラスを追加します。

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

そしてJS：

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

http://jsfiddle.net/tFv3G/

その理由は、属性による要素の検索は、クラス名による検索よりもはるかに遅いためです。また、可読性も低くなります。

于 2013-01-30T09:35:17.457 に答える
0

このコードを使用して、すべてのチェックボックスを選択/選択解除することをお勧めします。

$('input#select-all').change(function(){
  var checked = $(this).prop('checked');
  $(":input[name^='form[r']").prop('checked', checked);
});
于 2013-01-30T09:34:38.123 に答える