複選框與選項「全部」，但以不同的方式

Question

我有一個複選框列表，其中一人說：「所有」，但這裏的區別是，我並不需要選擇所有的複選框，當「所有」複選框被選中，我實際上需要它們被取消選擇。

聽起來有些不可思議，但是這就是我需要它。

讓我解釋什麼，我需要：

好吧，複選框列表中我提到。 「全部」複選框默認爲選中狀態，一旦我選中其他複選框（因爲其他複選框實際上是特定主題），應該取消選中該複選框。

這裏是扭曲的：如果用戶一個接一個地選擇所有其他複選框......就像他試圖全部選中它們一樣，那麼當用戶點擊最後一個複選框選中它時，它實際上會使所有選定的複選框取消選中，但「全部」複選框被選中。

這有道理嗎？

這裏是我的起點HTML：

<label> 
    <input type="checkbox" name="rb" value="all" id="all" checked> 
    All</label> 
<label> 
    <input type="checkbox" name="rb" value="ln" id="ln"> 
    Option 1</label> 
<label> 
    <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv"> 
    Option 2</label> 
<label> 
    <input type="checkbox" name="rb" value="publications" id="publications"> 
    Option 3</label> 
<label> 
    <input type="checkbox" name="rb" value="comm" id="comm"> 
    Option 4</label> 

這裏是萬一DEMO你想與它合作。

任何幫助，不勝感激。

謝謝。

Answer 1

好吧，我想出了fearofawhackplane的和馬立克氏答案之間的混合答案。

默認情況下，所有複選框都會被選中，當然'全部'也是。 '全部'檢查/取消選中所有複選框...我從最初的計劃中改變了這兩個想法，更有意義，但是:)。

當所有其他複選框一個接一個被選中/取消選中時，fearofawhackplane的解決方案會檢查'全部'複選框;和馬立克的解決方案，檢查/取消選中所有複選框，儘管我對他的代碼進行了小小的編輯。

這是最終的jQuery腳本 - 這可以縮短它嗎？ O_O：

$('#container :checkbox').change(function() { 
    $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length); 
}); 


$('#all').change(function() { 
    if ($('#all').attr('checked')) { 
    $('input[type=checkbox][id!=all]').attr('checked', 'checked'); 
    } else { 
    $('input[type=checkbox][id!=all]').attr('checked', ''); 
    } 
}); 

和HTML是一個由fearofawhackplane也提出了小的修改：

<label> 
    <input type="checkbox" name="rb" value="all" id="all" checked> 
All</label> 
<div id="container"> 
    <label> 
    <input type="checkbox" name="rb" value="ln" id="ln" checked> 
    Option 1</label> 
    <label> 
    <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv" checked> 
    Option 2</label> 
    <label> 
    <input type="checkbox" name="rb" value="publications" id="publications" checked> 
    Option 3</label> 
    <label> 
    <input type="checkbox" name="rb" value="comm" id="comm" checked> 
    Option 4</label> 
</div> 

這裏的最終功能DEMO。

感謝大家。

Answer 2

$("input").click(function() { 

    var $this = $(this); 
    if($this.is("[value=all]")) { 
     var otherItems = $("input[type=checkbox][value!=all]"); 
     if ($this.is(":checked")) { 
      otherItems.attr("checked", "").attr("disabled", "disabled") 
     } else { 
      otherItems.attr("disabled", ""); 
     } 
    } 

}); 

Answer 3

以下的javascript 檢查所有和 檢查單複選框

function checkall() 
{ 
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++) 
    { 
     document.getElementsByName("chkBox")[intCounter].checked = document.getElementById("chkAll").checked; 
    } 
} 

function checkManual() 
{ 
    var intCheckVal; 
    intCheckVal = 1; 
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++) 
    { 
     if(document.getElementsByName("chkBox")[intCounter].checked == false) 
      intCheckVal = 0; 
    } 
    if(intCheckVal == 1) 
     document.getElementById("chkAll").checked = true; 
    else 
     document.getElementById("chkAll").checked = false; 
} 

然後在檢查

使用所有複選框onclick="checkall();「 而在檢查單個複選框onclick="checkmanual();"

Answer 4

嘗試類似this。

我把「不是所有的」複選框在一個容器DIV，然後用

$('#container :checkbox').change(function() { 
    if ($('#container :checkbox:not(:checked)').length > 0) { 
     $('#all').attr('checked', false); 
    } 
    else { 
     $('#all').attr('checked', true); 
    } 
}); 

從而可以更簡明地寫（但少了幾分可讀）作爲

$('#container :checkbox').change(function() { 
    $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length); 
}); 

Answer 5

使用此代碼：

$('#all').change(function(){ 
    if ($('#all').attr('checked')) { 
     $('input[type=checkbox][id!=all]').attr('checked', ''); 
    } else { 
     $('input[type=checkbox][id!=all]').attr('checked', 'checked'); 
    } 
}); 

記住的jQuery添加到您的腳本：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> 

Answer 6

這個工程使用您的演示：

<script type="text/javascript"> 
    var allId = 'all'; 

    function getCheckboxes() { 
     return document.getElementById('checkboxes').getElementsByTagName('input'); 
    } 

    function clearCheckboxes() {  
     var checkboxes = getCheckboxes(); 
     for(var i=0; i<checkboxes.length; i++) { 
      if (checkboxes[i].id != allId) { 
       checkboxes[i].checked = false; 
      } 
     } 
    } 

    function setCheckboxes() {   
     var allCheckbox = document.getElementById(allId); 
     var checkboxes = getCheckboxes(); 
     var allChecked = true; 
     for(var i=0; i<checkboxes.length; i++) { 
      if (checkboxes[i].id != allId) { 
       if (!checkboxes[i].checked) { 
        allChecked = false; 
       } 
      } 
     } 
     if (!allChecked) { 
      allCheckbox.checked = false; 
     } 
     else { 
      allCheckbox.checked = true; 
      clearCheckboxes(); 
     } 
    } 
</script> 
<div id="checkboxes"> 
<label> 
    <input onclick="clearCheckboxes();" type="checkbox" name="rb" value="all" id="all" checked> 
    All</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="ln" id="ln"> 
    Option 1</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="prodsandserv" id="prodsandserv"> 
    Option 2</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="publications" id="publications"> 
    Option 3</label> 
<label> 
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="comm" id="comm"> 
    Option 4</label> 
</div> 

Answer 7

首先，爲什麼你的問題與反向邏輯上的「全部」複選框複雜化？在你的問題中將它稱爲「無」，並在實際實現中將標籤更改爲「全部」。

以下是您需要的組件。

將一個類添加到您的複選框。不是沒有一個。我們稱之爲「foo」。 <input type="checkbox" name="rb" value="ln" class="foo" id="ln">

將一個函數放入jquery onload部分，執行「none」操作。

$("#none").click(function()(source) 
{ 
    i=($(source).attr("checked")) == "checked" ? "" : "checked"; 
    $(":checkbox.foo").attr("checked",i); 
}; 

將一個函數在您的jQuery的onload節設置無箱每當另一個按鈕被點擊

$(":checkbox.foo").click(function() 
{ 
    noneVal = "checked"; 
    $(":checkbox.foo").each(function (index) { 
     if ($(this).attr("checked") == "checked") 
     { 
      noneVal = ""; 
      break; 
     } 
    }) 
    $('#none').attr("checked",noneVal); 
});