检查它的第一个复选框是否被点击

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>

我正在寻找的行为是，如果我 select 此 div (.checkbox-list input[type=checkbox]:first) 中的第一个复选框被选中后的所有其他复选框。同样，如果我 select 除了第一个，第一个被删除 select。

我正在为如何检查第一个是否被点击而苦恼？

$(".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
    }
});

这里有一个fiddle如果你想玩：http://jsfiddle.net/4c7aubqL/1/

Answer 1

您应该使用单选按钮，而不是复选框。这将完全按照您的意愿进行，您无需付出额外的努力。即使您成功完成了您尝试做的事情，用户界面也会看起来不对。

Answer 2

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);
    }
});

检查它的第一个复选框是否被点击

Check if its the first checkbox is clicked

javascript

checkbox

jquery