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/

Answer 1

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!