检查其点击第一个复选框

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

您应该使用单选按钮，复选框没有。这将完全符合你的要求，而你不需要额外的努力。即使你在试图做的事情上取得成功，用户界面也会出错。