jQuery hide table rows depending on checkbox click

Question

I'm trying to hide checkboxes depending on a click to another checkbox, it's working for one row, but I want it for a number of rows

(for instance)

If I click checkbox 1, checkbox 2, 3, 6 and 7 should hide If I click checkbox 2, checkbox 1, 3, 5 should hide

--EDIT :-)

Hello again,

Thanks a lot for all the help, finally it's working with multiple classes and event.target

look at http://jsfiddle.net/MH8e4/163/

-- last EDIT :-) I will use the solution from Muleskinner, because its not necessary to build up different classes and it is easier for dynamic forms. I'll added something to remove checked attributes if the checkbox hide

http://jsfiddle.net/QEG5a/7/

is there any common between 2,3,6,7 checkbox, so that i can identify that specific checkbox by anyhow?? — xkeshav, Jul 29 '11 at 08:19
Any reason you can't just apply multiple classes? So you could have checkbox 3 `class="wpbook_hidden wpbook_option_set_1 wpbook_option_set_2"? Or would that not work because you want it hidden if _both_ 1 and 2 are checked? — Chowlett, Jul 29 '11 at 08:23
Thank you! Multiple Classes is a good solution, I will try it! Greetings from Pit — Pit, Jul 29 '11 at 08:45

score 2 · Accepted Answer · answered Jul 29 '11 at 10:21

Interesting problem - This would be a good place to use the new HTML5 data attributes.

Take a look at this, should be pretty self-explaining (jsFiddle here):

jQuery

$('input:checkbox','.checkbox_container').click(function() {
   var checked = $(this).prop('checked');
   $.each($(this).data("connect").toString().split(","), function(index, value) {
       var item = '#item'+value;
        (checked) ? $(item).fadeOut() : $(item).fadeIn();
    });
});

HTML

<div class='checkbox_container'>
    <p id='item1'><input type="checkbox" id='chk1' data-connect="2" /> <label for='chk1'>Chekcbox 1 (hide 2, 4)</label></p>
    <p id='item2'><input type="checkbox" id='chk2' data-connect="1" /> <label for='chk2'>Chekcbox 2 (hide 1)</label></p>
    <p id='item3'><input type="checkbox" id='chk3' data-connect="" /> <label for='chk3'>Checkbox 3 (Do nothing)</label></p>
    <p id='item4'><input type="checkbox" id='chk4' data-connect="3,5" /> <label for='chk4'>Chekcbox 4 (hide 3,5)</label></p>
    <p id='item5'><input type="checkbox" id='chk5' data-connect="" /> <label for='chk5'>Chekcbox 5 (Do nothing)</label></p>
</div>

Happy coding!

that is a great solution, because it isn't necessary to build up all the multiple classes! Thank you! — Pit, Jul 29 '11 at 12:58

Nicola Peluchetti · Answer 2 · 2011-07-29T08:25:47.067

0

You could do like this (but i think that your markup could be better) using event.target to check which checkbox was checked/unchecked :

$('.wpbook_hidden').show();

$(':checkbox').change(function(e) {
    if($(this).is(':checked')){
        $('.wpbook_option_'+e.target.id).fadeOut('slow');
    }else{
        $('.wpbook_option_'+e.target.id).fadeIn('slow');
    }
});

fiddle here: http://jsfiddle.net/nicolapeluchetti/MH8e4/152/

edited Jul 29 '11 at 08:25

answered Jul 29 '11 at 08:20

Nicola Peluchetti

76,206
31
145
192

Hi @Nicola Peluchetti you've got a little typo on faedOut – Alex KeySmith Jul 29 '11 at 08:22
@Alex, actually, i rewrote my answer! ;) – Nicola Peluchetti Jul 29 '11 at 08:31
Thank you Nicola, I'll go forward with the multiple classes solution from "Genesis" and your Target solution. – Pit Jul 29 '11 at 08:49

score 0 · Answer 3 · answered Jul 29 '11 at 08:58

hope some helps

jquery:

$("#set_1").click(function(){
    var ids = [2,3,5,6];
    if($(this).is(":checked")){
        for(i=0;i<ids.length;i++){
            $("#set_"+ids[i]).parent("p").fadeOut(400);
        }
    }
    else{
        for(i=0;i<ids.length;i++){
            $("#set_"+ids[i]).parent("p").fadeIn(400);
        }
    }
})

HTML:

<p><input type="checkbox" id="set_1">checkbox 1</p>
<p><input type="checkbox" id="set_2">checkbox 2</p>
<p><input type="checkbox" id="set_3">checkbox 3</p>
<p><input type="checkbox" id="set_4">checkbox 4</p>
<p><input type="checkbox" id="set_5">checkbox 5</p>
<p><input type="checkbox" id="set_6">checkbox 6</p>
<p><input type="checkbox" id="set_7">checkbox 7</p>

http://jsfiddle.net/WFXun/

score 0 · Answer 4 · edited May 23 '17 at 11:43

For this HTML…

<div>
    <label for="cb1"><input type="checkbox" id="cb1"/>1</label>
    <label for="cb2"><input type="checkbox" id="cb2"/>2</label>
    <label for="cb3"><input type="checkbox" id="cb3"/>3</label>
    <label for="cb4"><input type="checkbox" id="cb4"/>4</label>
    <label for="cb5"><input type="checkbox" id="cb5"/>5</label>
    <label for="cb5"><input type="checkbox" id="cb6"/>6</label>
    <label for="cb7"><input type="checkbox" id="cb7"/>7</label>
</div>
<p>Click checkbox 1, checkbox 2, 3, 6 and 7 should hide</p>
<p>Click checkbox 2, checkbox 1, 3, 5 should hide</p>

and this jQuery 1.6+ (for the .prop('checked') part) JavaScript…

var hideMap = { "1" : [2, 3, 6, 7], "2" : [1, 3, 5] };

$('div input:checkbox').click(function() {
    var parent = $(this).closest('div');
    var hideIndex = parent.find('input').index(this) + 1 + "";

    if (hideMap[hideIndex]) {
        if(!$(this).prop('checked')) {
            parent.find('label').fadeIn();
        } else {
            $.each(hideMap[hideIndex], function(index, value) {
                parent.find('label:eq(' + (value - 1) + ')').fadeOut();
            });
        }
    }
});

should implement the requirements in the question for hiding/showing some checkboxes when the first or second checkbox is checked. If you have different markup (for instance you mentioned <table> rows) then you will have to adapt the jQuery selectors to match.

Demo

Note: for older versions of jQuery you will need to use a different function to determine if a checkbox is checked - see Setting "checked" for a checkbox with jQuery?

jQuery hide table rows depending on checkbox click

4 Answers4