檢查其點擊第一個複選框

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

您應該使用單選按鈕，複選框沒有。這將完全符合你的要求，而你不需要額外的努力。即使你在試圖做的事情上取得成功，用戶界面也會出錯。