如何控制来自不同复选框的复选框选中属性？

Question

我发现了一个无法正确解决的问题。 当我单击复选框时 9 个项目中的任何项目 groupSelect 功能没有被取消选中或正确检查。 我试图删除复选框项目的属性，但仍未执行 groupSelect 功能复选框。 每当我尝试选中或取消选中“Racial or Ethnic Group”复选框之前的项目时，我都会看到“Racial or Ethnic Group”复选框未正确执行。 请看sn-p，

function groupSelect(val) {
  let checkInput = $(val).parent().next().find('input[type="checkbox"]')
  if (val.checked == true) {
    $(() => {
      checkInput.attr('checked', 'true')
    })
  } else {
    checkInput.removeAttr('checked');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper pb-3">
  <div class="group_title">
    <strong>Racial or Ethnic Group</strong>
    <input title="Select all items in the group" type="checkbox" onclick="groupSelect(this)" style="cursor: pointer;" name="">
  </div>
  <div class="row no-gutters pt-2 px-3">
    <div class="col-12 col-sm-6 col-md-4">
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input"
                                           name="" id="" value="checkedValue">
                                          American Indian/Alaskan
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Hispanic/Latino
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Hispanic/Latino
                                        </label>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Asian/Pacific Islander
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          White/Caucasian
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          White/Caucasian
                                        </label>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Black/African American
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                        Other
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                        Other
                                        </label>
      </div>
    </div>
  </div>
</div>

Answer 1

我会使用checkInput.prop('checked', true) 和checkInput.prop('checked', false)

function groupSelect(val) {
  let checkInput = $(val).parent().next().find('input[type="checkbox"]')
  if (val.checked == true) {
    $(() => {
      checkInput.prop('checked', true)
    })
  } else {
    checkInput.prop('checked',false);
  }
}

您可以在.prop() vs .attr()找到更多信息

演示

function groupSelect(val) {
  let checkInput = $(val).parent().next().find('input[type="checkbox"]')
  if (val.checked == true) {
    $(() => {
      checkInput.prop('checked', true)
    })
  } else {
    checkInput.prop('checked',false);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper pb-3">
  <div class="group_title">
    <strong>Racial or Ethnic Group</strong>
    <input title="Select all items in the group" type="checkbox" onclick="groupSelect(this)" style="cursor: pointer;" name="">
  </div>
  <div class="row no-gutters pt-2 px-3">
    <div class="col-12 col-sm-6 col-md-4">
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input"
                                           name="" id="" value="checkedValue">
                                          American Indian/Alaskan
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Hispanic/Latino
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Hispanic/Latino
                                        </label>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Asian/Pacific Islander
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          White/Caucasian
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          White/Caucasian
                                        </label>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                          Black/African American
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                        Other
                                        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" style="cursor: pointer">
                                          <input type="checkbox" class="form-check-input" name="" id="" value="checkedValue">
                                        Other
                                        </label>
      </div>
    </div>
  </div>
</div>