'Select/Deselect All' in semantic ui checkboxes

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

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>