語義 ui 復選框中的“全選/取消全選”

Question

我已經看到了其他幾個像這樣的線程，但我不明白為什么我的代碼不起作用。

我有一組語義 UI 復選框，應在選中另一個名為All復選框時選中它們（同樣，當取消選中All復選框時，應取消選中All復選框）。

 $('.custom').click(function() { $('input[name="other_checkboxes"]').prop('checked',this.checked); });

 <div> <div class="ui checkbox custom"> <input id="all_box" type="checkbox" /> <label>All</label> </div> <div class="ui form grouped fields ss-checkbox-input" id="other_checkboxes"> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="other_checkboxes" tabindex="0" value="A" /> <label>A</label> </div> </div> <div class="field"> <div class="ui checkbox "> <input type="checkbox" name="other_checkboxes" tabindex="0" value="B" /> <label>B</label> </div> </div> </div> </div>

Answer 1

一個可能的工作解決方案。

 $("input[value='All']").change(function() { $("input[type='checkbox']").prop('checked', this.checked); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="ui form grouped fields ss-checkbox-input" id="myCheckboxes"> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="myCheckboxes" tabindex="0" value="All" /> <label>All</label> </div> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="myCheckboxes" tabindex="0" value="A" /> <label>A</label> </div> </div> <div class="field"> <div class="ui checkbox "> <input type="checkbox" name="myCheckboxes" tabindex="0" value="B" /> <label>B</label> </div> </div> </div>

Answer 2

請注意， this是div not input 。 所以代替this.checked使用$(e.target).prop("checked")

試試這個：

 $('.custom').click(function (e) { $('input[name="other_checkboxes"]').prop('checked', $(e.target).prop("checked")); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div> <div class="ui checkbox custom"> <input id="all_box" type="checkbox" /> <label>All</label> </div> <div class="ui form grouped fields ss-checkbox-input" id="other_checkboxes"> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="other_checkboxes" tabindex="0" value="A" /> <label>A</label> </div> </div> <div class="field"> <div class="ui checkbox "> <input type="checkbox" name="other_checkboxes" tabindex="0" value="B" /> <label>B</label> </div> </div> </div> </div>