show if 1 checkbox checked, hide if SEVERAL UNCHECKED jquery

Question

Hi I would like to figure out how to do some logic on a checkbox dilemma.

I have a listing for a video with tags associated with it.

It has a corresponding checkbox.

When the checkbox is checked the listing (display: none) is shown using jquery.

Now, since each video has multiple tags. The opposite function will prove undesirable because if the box is NOT checked it would remove its associated videos INCLUDING videos who happen to have been shown by other chekced tag boxes. And so as soon a div is shown, it is immediately hidden again. You follow?

I am envisioning something like

if (tag1 AND tag2 AND tag3 AND tag4 are not checked) then (hide the video div)

any way I can make that a reality?

Here's the first half, the rest might be up to you!!

$("#squaredThree<? echo $a_number  ?>").change(function() {
    var amount = 0;
    $("#squaredThree<? echo $a_number  ?>:checked").each(function(){

console.log('this has been determined to be ":checked"');

var theonestoshow = document.getElementsByClassName('<? echo $total_tags[$a_number]  ?>');

$(theonestoshow).show( "drop", 300); 

    });
});

additionally for your consideration is the styled interface so you can get an idea of what I am even talking about:

gui

You're using an `.each()` loop on `$("#squaredThree echo $a_number ?>:checked")` - does that mean you have multiple elements with the same ID? — nnnnnn, May 15 '13 at 21:29

nnnnnn · Answer 1 · 2013-05-15T21:42:48.743

I found your explanation a little confusing, but the way I'd implement your requirement is on change of any checkbox test whether any in the group is checked and if so show the video, if not hide it.

You're currently using an .each() loop on $("#squaredThree<? echo $a_number ?>:checked") - does that mean you have multiple elements with the same ID? That's not valid html, and won't work very well with your JS. Better to give all of the checkboxes in question a common class, because then you can easily work with them as a group. Say you changed them to all have class="checks":

var $cbs = $(".checks").change(function() {
    if ($cbs.is(":checked")){
        $('.<? echo $total_tags[$a_number]  ?>').show( "drop", 300);
    } else {
        $('.<? echo $total_tags[$a_number]  ?>').hide( "drop", 300);
    }
});

Demo: http://jsfiddle.net/DvGrD/

.is(":checked") will return true if any element in the jQuery object is checked, and false if none are checked.

(Of course if you don't want to change to introduce a class you can still use the same idea with the selector(s) of your choice.)

show if 1 checkbox checked, hide if SEVERAL UNCHECKED jquery

1 Answers1