Question

I have a table like this, and i have a checkbox at each row and checkboxes on each column. So i want to show/hide an tick mark image next to data in each td when i check the checkbox in the row and table headers. And the tick mark should hide when i uncheck.

Demo 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 on checkbox change by adding a class.
For each i check if both corresponding checkboxes (line and column) are unchecked before removing 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');
            }
        });
    }
});