jQuery：在加載時顯示所有div，點擊隱藏除此之外的所有div

Question

我已經整夜工作以使這個功能起作用，但我認為我太多了菜鳥:)

我有一個復選框列表和一個div列表，其中包含相應的class / id名稱。

我希望在頁面加載時顯示所有div，當用戶選擇一個或多個復選框時，隱藏未選中的div。

有人可以幫幫我嗎？

到目前為止，我有以下腳本：

$('.brand').change(function() {
        $('li.merk').not('li#m_' + $(this).attr('id') + '').toggle();

});change();

<input type="checkbox" class="brand" id="Gazelle" />
<input type="checkbox" class="brand" id="Batavus" />
<input type="checkbox" class="brand" id="Trek" />
<input type="checkbox" class="brand" id="KogaMiyata" />


<li class="merk" id="m_Gazelle" style="display:block;">
Gazelle
</li>

<li class="merk" id="m_Batavus" style="display:block;">
Batavus
</li>

<li class="merk" id="m_Trek" style="display:block;">
Trek
</li>

<li class="merk" id="m_KogaMiyata" style="display:block;">
KogaMiyata
</li>

http://jsfiddle.net/PbZRF/

求助：用戶m90為我做了伎倆，我的更新代碼= @ http://jsfiddle.net/PbZRF/27/

$('.brand').on('change',function() {

        $checked = $('.brand:checked'); //perform selection only once

        if ($checked.length){ //checks if there are checked elements at all
           $('.merk').hide(); //hide all
           $checked.each(function(){
               $('li#m_' + $(this).attr('id') + '').show(); //show only the items with corresponding checkboxes
           });
        } else { //no checked elements
           $('.merk').show(); //show all
        }

    });

    <input type="checkbox" class="brand" id="Gazelle" />
    <input type="checkbox" class="brand" id="Batavus" />
    <input type="checkbox" class="brand" id="Trek" />
    <input type="checkbox" class="brand" id="KogaMiyata" />


    <li class="merk" id="m_Gazelle" style="display:block;">
    Gazelle
    </li>

    <li class="merk" id="m_Batavus" style="display:block;">
    Batavus
    </li>

    <li class="merk" id="m_Trek" style="display:block;">
    Trek
    </li>

    <li class="merk" id="m_KogaMiyata" style="display:block;">
    KogaMiyata
    </li>

Answer 1

您可以使用:checked -pseudoclass來做這樣的事情：

$('.brand').on('change',function() {
    $('.merk').hide(); //hide all
    $('.brand:checked').each(function(){
        $('li#m_' + $(this).attr('id') + '').show(); //show only the items with corresponding checkboxes
    });

});​

請參閱： http ： //jsfiddle.net/PbZRF/16/

編輯 ：回復你的評論你可以檢查$('.brand:checked')選擇的.length和“采取措施”，以防它返回0 /是假的 ：

$('.brand').on('change',function() {

    $checked = $('.brand:checked'); //perform selection only once, otherwise you'll get snarky comments around here :P - also best practice, so do it

    if ($checked.length){ //checks if there are checked elements at all
       $('.merk').hide(); //hide all
       $checked.each(function(){
           $('li#m_' + $(this).attr('id')).show(); //show only the items with corresponding checkboxes
       });
    } else { //no checked elements
       $('.merk').show(); //show all
    }

});​

請參閱： http ： //jsfiddle.net/PbZRF/27/

Answer 2

問題：你正在使用帶有多個復選框的.toggle() 。 因此，如果選中復選框1和2，則div和2切換一次，而div 3和4切換兩次 - 給出與您想要的結果相反的結果。

嘗試這個。 它使用.toggle()的布爾參數和.each循環來獲得所需的結果。

$('.brand').change(function() {
    $('.brand').each(function() {
        $('li.merk[id="m_' + $(this).attr('id') + '"]').toggle(!$(this).is(':checked'));
    });
});​

http://jsfiddle.net/PbZRF/22/

或者，如果您希望在未選中時將其隱藏並在選中時顯示：

$('li.merk').hide();

$('.brand').change(function() {
    $('.brand').each(function() {
        $('li.merk[id="m_' + $(this).attr('id') + '"]').toggle($(this).is(':checked'));
    });
});​

http://jsfiddle.net/PbZRF/25/

Answer 3

在邏輯上上載需要檢查所有框，因此顯示div：

<input type="checkbox" class="brand" id="Gazelle" checked="checked" />
<input type="checkbox" class="brand" id="Batavus" checked="checked" />
<input type="checkbox" class="brand" id="Trek" checked="checked" />
<input type="checkbox" class="brand" id="KogaMiyata" checked="checked" />

那你需要的只是：

$('.brand').change(function() {
        $('li#m_' + $(this).attr('id')).toggle();

});​

我理解你了嗎？

Answer 4

你的例子對我有用，除非我選擇了多個復選框。 如果您只想選擇一個選項，我建議使用單選按鈕而不是復選框，但如果您想要多個選項，我在這里修改了您的代碼： http ： //jsfiddle.net/cchana/awEWN/4/

$('.brand').click(function() {
    $('li.merk').hide();
    $('input.brand:checked').each(function() {
        $('li#m_'+$(this).attr('id')).toggle();
    });
});

基本上，它隱藏了所有li元素，查找已經檢查過的所有復選框並顯示它們。

Answer 5

  $('.brand').change(function() {
    $('.merk').show(); 
    var $unchecked = $('.brand:not(:checked)'); 

    /* Only hide divs when not all checkeboxes are unchecked  */ 
    if( $unchecked.length !== 4 )
        $unchecked.each(function(){ $('#m_'+this.id).hide(); });             
   });​

http://jsfiddle.net/PbZRF/28/