Question

我正在创建一个表单，其中有一个可供用户使用的权限列表。每个权限都是一个复选框。（因此，有一个复选框列表！）

权限是包容性的...列表的顶部元素提供对自身及其下方的访问权限。

我正在尝试使用表单UI对此进行建模。我希望复选框下方的复选框能够在上方检查框时自动检查自己。

问题是我无法弄清楚如何使用javascipt或jquery来做到这一点。我可以在切换框时运行函数，但我无法弄清楚如何检查DOM中的以下框。

按钮的HTML代码：

<div class="account_edit">
  <a name="edit_permissions"><h2>Edit Permissions</h2></a>
  <form action="/admin/account-modify/permissions/" method="POST">
    <h3>Request permission change:</h3>
    <span>(all items below selected permission level are included)</span>

    <h4>Admin</h4>
    <input class="radio" type="checkbox" name="permission[]" value="0">manage users
    <br/>

    <h4>Manager</h4>
    <input class="radio" type="checkbox" name="permission[]" value="1">view users
    <br/>
    <input class="radio" type="checkbox" name="permission[]" value="2">view students
    <br/>

    <h4>Editor</h4>
    <input class="radio" type="checkbox" name="permission[]" value="3">manage new stories
    <br/>
    <input class="radio" type="checkbox" name="permission[]" value="4">manage videos
    <br/>
    <input class="radio" type="checkbox" name="permission[]" value="5">manage pictures
    <br/>

    <h4>Reporter</h4>
    <input class="radio" type="checkbox" name="permission[]" value="6">upload news stories
    <br/>
    <input class="radio" type="checkbox" name="permission[]" value="7">upload videos
    <br/>
    <input class="radio" type="checkbox" name="permission[]" value="8">upload pictures
    <br/>

    <h4>User</h4>
    <input class="radio" type="checkbox" name="permission[]" value="10">manage your account
    <br/>

    <input class="submit" type="submit" value="Request Change">
    <br/>
    <a class="cancel" href="#">cancel</a>
  </form>
</div>

Answer 1

$('input[type=checkbox]').change(function () {
    $(this).nextAll('input[type=checkbox]').prop('checked', this.checked);
});

这里是小提琴：http://jsfiddle.net/xAxXK/

如果您希望您的代码更高效一点，您可以使用这个更长的代码片段和更少的DOM travesal：

var checkboxes = $('input[type=checkbox]');

checkboxes.change(function () {

    var index = checkboxes.index(this);
    var isChecked = this.checked;

    checkboxes.each(function (i, el) {
        if ( i > index ) el.checked = isChecked;
    });
});

这里是小提琴：http://jsfiddle.net/xAxXK/1/

包含复选框列表（自动选中所选框下方的复选框）

1 个答案: