JQuery показать / скрыть изображения на флажки

Question

У меня есть такая таблица, и у меня есть флажок в каждой строке и флажки в каждом столбце.Поэтому я хочу показать / скрыть изображение галочки рядом с данными в каждом тд, когда я отмечаю флажок в строке и заголовках таблицы.И галочка должна скрываться, когда я снимаю галочку.

Демонстрация этого: 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

Вы бы использовали что-то вроде этого:

//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 2

JSFiddle Demo (отредактировано для соответствия комментариям)

Я меняю цвет текста при смене флажка, добавляя класс. Для каждого я проверяю, сняты ли оба соответствующих флажка (строка и столбец) перед удалением класса.

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 3

Это лучший ответ, который я могу вам дать.Пожалуйста, проверьте ...

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

Надеюсь, это поможет:)