jQuery 在选中复选框时显示/隐藏图像

Question

我有一个像这样的表，每行都有一个复选框，每列都有一个复选框。因此，当我选中行和表标题中的复选框时，我想在每个 td 中的数据旁边显示/隐藏刻度线图像。当我取消选中时，刻度线应该隐藏。

演示：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();
    }
});

编辑：

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 演示（编辑以匹配注释）

我通过添加类来更改复选框更改上的文本颜色。
对于每个我在删除类之前检查是否两个相应的复选框（行和列）都未被选中。

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/

希望这有帮助:)