jeudi 27 août 2020

How to control checkbox checked attribute from different checkbox?

I see an issue that I can't fix it properly. When I click the checkbox any item among 9 items the groupSelect function not getting unchecked or checked properly. I have tried to remove the attribute of the checkbox items but still not execute the groupSelect function checkbox. whenever I try to checked or unchecked the item before "Racial or Ethnic Group " checkbox then I see the "Racial or Ethnic Group " checkbox not execute properly. Please see the snippet,

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>



Aucun commentaire:

Enregistrer un commentaire