1

我正在制作一个表单，其中包含用户可用的权限列表。每个权限都是一个复选框。（因此，有一个复选框列表！）

权限是包容性的......列表的顶部元素可以访问自身以及它下面的元素。

我正在尝试使用表单 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>
4

1 回答 1

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

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

如果你想让你的代码更高效一点，你可以使用这个更长的代码片段，减少 DOM 遍历：

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/

于 2013-08-22T01:27:21.767 回答