jQuery checkbox selection with multiple selections

Question

Having some issues with my jQuery checkbox selection when I'm selecting on 2 or more checkboxes. I'm still new with the front-end programming so please bear with me.

Selecting/deselecting on one checkbox works great, however the problem lies when selecting multiple selections:

1) When I select the first checkbox and an additional second checkbox it gives all of the selections excluding the second selection.

2) And when I de-select the second checkbox with the first checkbox still checked it gives me all selections.

It seems I have to select on the boxes twice for it to properly register and give me the right filtered selections.

Code here: JSFiddle

HTML

<div class="tags">
<label>
    <input type="checkbox" rel="accounting" />Accounting</label>
<label>
    <input type="checkbox" rel="courier" />Courier</label>
<label>
    <input type="checkbox" rel="project-management" />Project Management</label>
<label>
    <input type="checkbox" rel="video-games" />Video Games</label>
</div>
<ul class="results">
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a></li>
<li class="courier" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Courier</a></li>
<li class="project-management" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Project Management</a></li>
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a></li>
</ul>

jQuery

$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
    if ($(this).prop("checked")) {
        $('.results > li').toggle('show');
        $('div.tags').find('input:checked').each(function () {
            $('.results > li.' + $(this).attr('rel')).toggle('show');
        });
    } else{
       $('.results > li').show();
    }
});
});

Almost, can you change it to where if nothing is selected the entire list shows up instead of nothing? And selecting on each brings up those selections etc. — Kincsem
– Kincsem, Commented Dec 28, 2014 at 4:00

j08691 · Accepted Answer · 2014-12-28 04:07:30Z

1

This seems to do what you need:

$('div.tags').find('input:checkbox').on('click', function () {
    var vals = $('input:checkbox:checked').map(function () {
        return $(this).attr('rel');
    }).get();
    $('li').hide().filter(function () {
        return ($.inArray($(this).attr('class'), vals) > -1)
    }).show()
    if ($('input:checkbox:checked').length == 0) $('li').show()
});

jsFiddle example

answered Dec 28, 2014 at 4:07

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery checkbox selection with multiple selections

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related