jQuery 체크 박스에 체크 표시/숨기기 이미지

Question

나는 이와 같은 테이블을 가지고 있고 각 열에 체크 박스가 있고 각 열에 체크 박스가 있습니다. 그래서 내가 행/테이블 헤더의 체크 박스를 체크하면 각 td의 데이터 옆에 진드기 마크 이미지를 보이거나 숨기고 싶다. 선택을 취소하면 눈금 표시가 숨겨져 야합니다. 이것의

데모 :

//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(); 
    } 
}); 

편집 : 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

당신은 같은 것을 사용하는 것이

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/

희망이 도움이 :) 당신은 질문이 혼란 보인다