'Select/Deselect All' 语义 ui 复选框

Question

我已经看到了其他几个与此类似的线程，但我不明白为什么我的代码不起作用。

我有一组语义 UI 复选框，当另一个名为 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 而不是 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>

'Select/Deselect All' 语义 ui 复选框

'Select/Deselect All' in semantic ui checkboxes

javascript

semantic-ui