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

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 2

你會使用這樣的：

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

這是我可以給你最好的答案。請檢查...

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

希望這有助於:)