如何控制來自不同復選框的復選框選中屬性？

Question

我看到一個無法正確修復的問題。 當我單擊復選框 9 個項目中的任何項目時，groupSelect 功能沒有被取消選中或正確檢查。 我試圖刪除復選框項目的屬性，但仍然沒有執行 groupSelect 函數復選框。 每當我嘗試在“種族或民族”復選框之前選中或取消選中該項目時，我都會看到“種族或民族”復選框無法正確執行。 請看片段，

 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() 與 .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>