jQuery hide table rows depending on checkbox click

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 buil开发者_StackOverflow中文版d 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/

---

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!

---

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/

---

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/

---

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?