이 jQuery 코드가 모든 체크 박스를 체크하지 않는 이유는 무엇입니까?

Question

HTML :

<table class="responsive" id="products"> 
    <a href="#" id="checkAllProducts">Do it</a> 
    <input type="checkbox"> 
    <input type="checkbox"> 
    <input type="checkbox"> 
</table> 

JS는 :

$(document).ready(function(){ 
    $('#checkAllProducts').click(function(){ 
    var checkbox = $('#products input:checkbox'); 
    checkbox.attr('checked',!checkbox.attr('checked')); 
    }); 
});​ 

그것은 디버깅 here 사용할 수 있습니다.

내가 수행 할 경우 코드는 작동합니다 (var checkbox = $('input:checkbox');). 선택기에 문제가있을 수 있습니다.

이 코드는 링크를 클릭 한 후 모든 확인란을 선택해야합니다. 그러나 그것은 그것을하지 않습니다. 왜?

Answer 1

디버깅을위한

var checkbox = $('#products tr td input:checkbox'); 

비슷해야 올바른 형식. 문제는 표가 라인과 행의 정의, td, tr 똥 같은 물건을 가지고 있다는 것입니다, 당신은 시도 할 경우 :

<table class="responsive" id="products"> 
    <tr> 
     <td> 
      <a href="#" id="checkAllProducts">Do it</a> 
      <input type="checkbox"> 
      <input type="checkbox"> 
      <input type="checkbox"> 
     </td> 
    </tr> 
</table> 

그것이 잘 작동하고 당신이 할 수 있습니다

$(function(){ 
    $('#checkAllProducts').on('click', function(e){ 
     e.preventDefault(); 
     var checkbox = $('#products input[type="checkbox"]'); 
     checkbox.prop('checked', !checkbox.prop('checked')); 
    }); 
}); 

FIDDLE

Answer 2

var checkbox = $('#products input:checkbox'); 

checkbox이 하나의 체크 박스 아닙니다, 당신은

Answer 3

귀하의 HTML이 유효하지 않습니다 .. 모든 체크 박스에 작업을 할 .each()를 호출해야합니다. input 요소를 table 요소 안에 직접 넣을 수는 없습니다. 브라우저는 다음 요소가 테이블 태그를 따라 가면 안되는 것을 발견하면 테이블 태그를 자동으로 닫을 가능성이 높습니다. 따라서 체크 박스는 #products 선택기의 하위 항목으로 찾을 수 없습니다.

<div class="responsive" id="products"> 

트릭을 수행합니다.

는 또한, 당신이 소품을 사용해야하므로, 속성입니다 "확인"()에 액세스하기 :

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

http://jsfiddle.net/UNqfv/6/

Answer 4

HTML 테이블 요소는 TR, TD 태그를 포함해야합니다.

<table class="responsive" id="products"> 
    <tr> 
     <td><a href="#" id="checkAllProducts">Do it</a></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
    </tr> 
</table> 

내가 한 테이블은 같은 테이블에 어떤 블록 레벨 또는 인라인 요소를 포함 할 수 있습니다 알고 당신의 선택 코드는 지금까지 here

Answer 5

사용이 그것은 잘 작동합니다

$(document).ready(function(){ 
    $('#checkAllProducts').click(function(){ 
    var checkbox = $('input:checkbox'); 
    checkbox.attr('checked',!checkbox.attr('checked')); 
}); 

});​ 

"all check bockes"를 지정해야하는 이유. 선택기 "$ ('# products input : checkbox');"를 사용하는 순간에 id가 "products"인 확인란 만 선택하게됩니다. "제품"이라는 모든 확인란에 id 특성이 있으면 원래 코드가 작동합니다. 대신 위의 선택기에서 체크 상자 유형을 선택합니다. 잘하면이 도움이되고, 설명은 분명합니다! 해피 코딩!