jQuery的複選框操作需要幫助

Question

我也不怎麼做的編碼jQuery中的複選框

<p class="list"> 
    <label for="chkSunday"><input type="checkbox" checked name="chkday" id="chkday0" value="0" />All days</label> 
    <label for="chkSunday"><input type="checkbox" name="chkday" id="chkday1" value="1" />Sunday</label> 
    <label for="chkMonday"><input type="checkbox" name="chkday" id="chkday2" value="2" />Monday</label> 
    <label for="chkTuesday"><input type="checkbox" name="chkday" id="chkday3" value="3" />Tuesday</label> 
    <label for="chkWednesday"><input type="checkbox" name="chkday" id="chkday4" value="4" />Wednesday</label> 
    <label for="chkThursday"><input type="checkbox" name="chkday" id="chkday5" value="5" />Thursday</label> 
    <label for="chkFriday"><input type="checkbox" name="chkday" id="chkday6" value="6" />Friday</label> 
    <label for="chkSaturday"><input type="checkbox" name="chkday" id="chkday7" value="7" />Saturday</label> 
</p> 

在上述複選框我有一些用例：

• USECASE 1
  • 用戶選擇任何一天然後「所有」複選框應取消選中
• 使用案例2
  • 用戶取消選中所有天，那麼「所有」複選框選中要

我不知道如何在jQuery中處理這個問題。

Answer 1

我想這是你後：

$(".list :checkbox").change(function() { 
    if(this.id == "chkday0") $(".list :checkbox:gt(0)").attr("checked", false); 
    $("#chkday0").attr("checked", $(".list :checkbox:gt(0):checked").length == 0); 
}); 

You can test it out here。這是在爲<p>中的每個複選框安裝change處理程序。

• 如果是第一個（全部），則清除所有其他日子。
• 不管它是哪一個，如果沒有其他人被選中，檢查第一個（如果沒有天，選中全部）。

還要注意在演示中<label>元素改變......他們有無效for屬性，因爲它們包裹他們一起去了<input>，你可以只取出for反正。

Answer 2

這與@Nick's answer非常相似，但是避免了一些DOM選擇。它假定一組靜態元素。

例子：http://jsfiddle.net/patrick_dw/7UwLU/

var $allBoxes = $('p.list input:checkbox').change(function() { 
    var $dayBoxes = $allBoxes.slice(1); 
    if ($allBoxes[0].checked) $dayBoxes.not(this).attr('checked', ''); 
    $allBoxes[0].checked = !$dayBoxes.filter(':checked').length; 
}); 

無需改變公認的答案。只是另闢蹊徑。