選中或取消選中所有啓用的複選框

Question

我試圖在點擊'＃leg-chkAll'時切換所有啓用的複選框，但是 我錯過了一些東西！

如果可能，請解釋一下javascript代碼。

$(document).ready(function(){ 
 
    $('#leg-chkAll).on('click', function() { 
 
\t \t $('div#legend').find('div :checkbox:enabled') \t \t \t \t \t 
 
\t \t \t .prop('checked', this.checked) 
 
\t \t \t .find('tbody :checkbox').toggleClass('selected', this.checked); 
 

 
\t }); 
 
});

<div id="leg-chkAll"> 
 
    <input type="checkbox"> 
 
    <span class="leg-des">All</span> 
 
</div> 
 
<div id="legend"> 
 
    <div id="leg-evt1"> 
 
     <input type="checkbox" class="leg-chk" checked> 
 
     <span class="leg-cod ev-event1">E1</span> 
 
     <span class="leg-des">Event1</span> 
 
     <span class="leg-day">1</span> 
 
    </div> 
 
    <div id="leg-evt2"> 
 
     <input type="checkbox" class="leg-chk" checked> 
 
     <span class="leg-cod ev-event2">E2</span> 
 
     <span class="leg-des">Event2</span> 
 
     <span class="leg-day">10</span> 
 
    </div> 
 
    <div id="leg-evt3"> 
 
     <input type="checkbox" class="leg-chk" checked> 
 
     <span class="leg-cod ev-event3">E3</span> 
 
     <span class="leg-des">Event3</span> 
 
     <span class="leg-day">3</span> 
 
    </div> 
 
    <div id="leg-evt4"> 
 
     <input type="checkbox" class="leg-chk" disabled> 
 
     <span class="leg-cod ev-event4">E4</span> 
 
     <span class="leg-des">Event4</span> 
 
     <span class="leg-day">0</span> 
 
    </div> 
 
    <div id="leg-evt5"> 
 
     <input type="checkbox" class="leg-chk" checked> 
 
     <span class="leg-cod ev-event5">E5</span> 
 
     <span class="leg-des">Event5</span> 
 
     <span class="leg-day">6</span> 
 
    </div> 
 
</div>

問候， 埃利奧·費爾南德斯

Answer 1

兩個問題：

1. 它看起來像你只是在這裏失蹤的關單引號：$('#leg-chkAll)。

2. #leg-chkAll是第一個div的id，但您希望聽取第一個複選框的點擊，而不是包含div。

如果您將該id放在複選框元素上，它會起作用。 HTML的第一個塊更改爲：

<div> 
    <input type="checkbox" id="leg-chkAll" checked> 
    <span class="leg-des">All</span> 
</div> 

然後修改您的jQuery像這樣：

$(document).ready(function(){ 
    $('#leg-chkAll').on('click', function() { 
    $('#legend').find(':checkbox:enabled').prop('checked', this.checked) 
    }); 
}); 

這裏有一個工作的jsfiddle：https://jsfiddle.net/t9w944z9/