Question

我有一个复选框列表，如下所示：

<div class="checkbox-list">
     <label><input type="checkbox" value="" /> All items</label><br />
     <label><input type="checkbox" value="1" /> First item</label><br />
     <label><input type="checkbox" value="2" /> Second item</label><br />
     <label><input type="checkbox" value="3" /> Third item</label><br />
     <label><input type="checkbox" value="4" /> Forth Checkbox</label>
</div>

我正在寻找的行为是，如果我选中此div（.checkbox-list input[type=checkbox]:first）中的第一个复选框，则选中此复选框后的所有其他复选框。同样，如果我选择除第一个之外的任何一个，则取消选择第一个。

我正在努力研究如何点击第一个？

$(".checkbox-list").on("change", "input[type=checkbox]", function () {
    if ($(this).first()) { // <- not working - how do I know if I clicked the first one?
        $("input[type=checkbox]:checked", ".checkbox-list").not(this).prop("checked", false);
        $(this).prop("checked", true);
    } else {
         // Uncheck first checkbox
    }
});

如果你想玩的话，这是一个小提琴：http://jsfiddle.net/4c7aubqL/1/

Answer 1

<强> jsBin demo

$(".checkbox-list").on("change", ":checkbox", function() {
    var $all   = $(".checkbox-list").find(":checkbox");
    var $first = $all.eq(0);
    if ($first.is(":checked")) { 
        $all.not(this).prop("checked", false);
    }
});

Answer 2

您应该使用单选按钮，而不是复选框。这将完全符合您的要求，您无需付出额外的努力。即使你成功完成了你想要做的事情，用户界面看起来也会出错。

检查是否单击了第一个复选框

2 个答案: