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

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/

---

如果你想让你的代码更高效一点，你可以使用这个更长的 sn-p 并减少 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/