Question

我已经整夜工作以使这项功能发挥作用，但我认为我是一个非常多的小道：）

我有一个复选框列表和一个包含相应类/ ID名称的div列表。

我希望在页面加载时显示所有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 - 伪类来做这样的事情：

$('.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/

编辑：回复您的评论，您只需查看.length选项的$('.brand:checked')和＆＃34;采取措施＆＃34;如果它返回0 /是 falsy ：

$('.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()多个复选框。因此，如果选中一个和两个复选框，则div为二，一个切换一次，而三个和四个div切换两次 - 给出与您想要的结果相反的结果。

试试这个。它使用.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/

jQuery：在加载时显示所有div，点击隐藏除此之外的所有div

5 个答案: