语义 ui 复选框中的“全选/取消全选”

Question

I have seen a couple of other threads like this one, but I do not see why my code is not working.

I have a group of semantic UI checkboxes that should be checked when another checkbox called All is checked (similarly, all checkboxes should be unchecked when the All checkbox is unchecked).

 $('.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

A possible working solution.

 $("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

Note that this is div not input . So instead of this.checked use $(e.target).prop("checked")

Try this one:

 $('.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>