상위 요소의 확인란을 선택하십시오.

Question

내 코드 here의 기본 데모를 만들었습니다.

원하는 기능 :

내가 그 TR 내부 TR 체크 박스를 클릭

체크 얻을해야하고 그럴 강조 받아야합니다. 확인란을 클릭 할 때도 마찬가지입니다.

문제점 :

위의 기능은 확인란을 클릭하면 완벽하게 작동합니다. 그러나 tr을 클릭하면 첫 번째 클릭에 대해서만 작동합니다. tr을 다시 클릭하면 체크 박스가 다시 체크 인되지 않습니다.

무엇이 문제 일 수 있습니까? 도와주세요.

jquery 및 html은 jsfiddle 링크에서 찾을 수 있습니다. 하지만 여전히 여기에 참조 할 수있다 :

HTML :

<table border="1" width="100%"> 
    <tbody> 
     <tr> 
      <th colspan="4">NEW PRODUCTS FOUND</th> 
     </tr> 
     <tr> 
      <th>Shelf</th> 
      <th>Product</th> 
      <th>Corrected</th> 
     </tr> 
     <tr class="hover_row hover_row_product pr_row_1"> 
      <td>aa</td> 
      <td>sdcsd</td> 
      <td> 
       <input type="checkbox" class="product_correction" product_id="1"> 
      </td> 
     </tr> 
     <tr class="hover_row hover_row_product pr_row_2"> 
      <td>aa</td> 
      <td>sdcsdc</td> 
      <td> 
       <input type="checkbox" class="product_correction" product_id="2"> 
      </td> 
     </tr> 
     <tr class="hover_row hover_row_product pr_row_3"> 
      <td>aa</td> 
      <td>dbfgbdfgb</td> 
      <td> 
       <input type="checkbox" class="product_correction" product_id="3"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

JS :

/*Correction proccess*/ 
$('.hover_row_product').click(function (e) { 
    var checkbox = $(this).find(':checkbox'); 
    if ($(e.target).closest('input[type="checkbox"]').length > 0) { 
     //check box clicked 
    } else { 
     checkbox.attr('checked', !checkbox.attr('checked')); 
    } 
    $prod_id = checkbox.attr('product_id'); 
    $input_checked = 2; 
    if (checkbox.is(':checked')) { 
     $input_checked = 1; 
     $('.pr_row_' + $prod_id).addClass('corrected_row'); 
    } else { 
     $input_checked = 0; 
     $('.pr_row_' + $prod_id).removeClass('corrected_row'); 
    } 
}); 

Answer 1

근무 데모http://jsfiddle.net/78qzH/또는 경고 http://jsfiddle.net/HfYZe/

사용 .prop에서이 화장실대신. .prop() vs .attr()

희망이 당신의 필요에 맞게 : 또한 예리한 당신이 경우

! :)

코드

/*Correction proccess*/ 
$('.hover_row_product').click(function (e) { 
    var checkbox = $(this).find(':checkbox'); 
    if ($(e.target).closest('input[type="checkbox"]').length > 0) { 
     //check box clicked 
    } else { 
     checkbox.prop('checked', !checkbox.prop('checked')); 
    } 
    $prod_id = checkbox.attr('product_id'); 
    $input_checked = 2; 
    if (checkbox.is(':checked')) { 
     $input_checked = 1; 
     $('.pr_row_' + $prod_id).addClass('corrected_row'); 
    } else { 
     $input_checked = 0; 
     $('.pr_row_' + $prod_id).removeClass('corrected_row'); 
    } 
}); 

Answer 2

내가 prop()에 7 호선에 attr() 통화를 전환 할 때 내가 원하는 기능을 참조하십시오

checkbox.prop('checked', !checkbox.prop('checked')); 

아마도 다른 사람이 소스를 제공 할 수있다,하지만 난 돈 ' 브라우저가 수동으로 조작하지 않는 한 브라우저는 항상 "checked"속성을 실제 속성으로 등록합니다 (네이티브 기능과는 반대로 : clic 킹 체크 박스). 물론 이것은 체크 박스의 객체 자체의 속성으로 항상 사용할 수 있습니다.