JQuery show / hide images when checking checkboxes

Question

I have a table like this, and I have a checkbox in each row and checkboxes for each column. So I want to show / hide the image of the label next to the data in each td when I check the box in the row and table headers. And the checkmark should hide when I uncheck.

Demonstration of this: http://jsfiddle.net/MpzXU/3/

<table id="example"> <thead> <tr> <th></h> <th>PO Number</th> <th>Hangtag<input type="checkbox" value="hangtag" class="ht_chkbx"/></th> <th>Care Label<input type="checkbox" value="Care Label" class="cl_chkbx"/></th> <th>UPC<input type="checkbox" value="UPC" class="upc_chkbx"/></th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="checkbox2" id="checkbox2"></td> <td>6711112</td> <td>1</td> <td>20</td> <td>17</td> </tr> </tbody> </table> 

Answer 1

JSFiddle Demo (edited to match comments)

I change the color of the text when changing the checkbox by adding a class. For each, I check whether both corresponding checkboxes (row and column) are cleared before deleting the class.

HTML

 <table id="example"> <thead> <tr> <th></th> <th>A <input type="checkbox" /></th> <th>B <input type="checkbox" /></th> <th>C <input type="checkbox" /></th> <th>D <input type="checkbox" /></th> </tr> </thead> <tbody> <tr> <td>1 <input type="checkbox"></td> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> <td>2 <input type="checkbox"></td> <td>B1</td> <td>B2</td> <td>B3</td> <td>B4</td> </tr> <tr> <td>3 <input type="checkbox"></td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> </tr> </tbody> 

JQuery

 var headers = $('#example th'); $(':checkbox', '#example').change(function(e){ var isChecked = $(this).is(':checked'); if( $(this).closest('thead').length ){ //columns checkboxes //getting the column index var i = headers.index( $(this).parent() ); $('tbody tr', '#example').each(function(){ var isLineChecked = $(':checkbox:checked', this).length; if( isChecked && isLineChecked ){ $(this).find('td:eq('+i+')').addClass('selected'); } else { $(this).find('td:eq('+i+')').removeClass('selected'); } }); } else { //line checkbox var columnsCheckboxes = $(':checkbox', headers); $(this).parent().siblings().each(function(i, td){ if( isChecked && columnsCheckboxes.eq(i).is(':checked') ){ $(this).addClass('selected'); } else { $(this).removeClass('selected'); } }); } }); 

Answer 2

You would use something like this:

 //Monitor the main checkbox ( $("#macDaddyCheckbox") ) for changes $("#macDaddyCheckbox").change(function(){ if($(this).is(":checked")){ //It is checked, so hide the other checkboxes $(".babyCheckboxes").hide(); } else { //It is not chceked, so show the other checkboxes $(".babyCheckboxes").show(); } }); 

EDIT:

 var myImg = $("#myImg"); $("#checkBoxAtTheRow").change(function(){ if($(this).is(":checked")){ myImg.hide(); } else { myImg.show(); } }); $(".tableHeaderCheckBoxes").change(function(){ if($(this).is(":checked")){ $(".babyCheckboxes").hide(); } else { $(".babyCheckboxes").show(); } }); 

Answer 3

This is the best answer I could give you. Please check...

http://jsfiddle.net/MpzXU/9/

Hope this helps :)