How to control checkbox checked attribute from different checkbox?

Question

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>

So what you want to happen is when checking/unchecking the Racial or Ethnic Group checkbox all the checkbox below will be check/uncheck? — elpmid, Aug 27 '20 at 08:47
Off topic: why does setting it use a doc.ready, but clearing it doesn't? — freedomn-m, Aug 27 '20 at 09:04

score 1 · Answer 1 · answered Aug 27 '20 at 08:46

I would use checkInput.prop('checked', true) and 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);
  }
}

You can find some more information on .prop() vs .attr()

Demo

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>

thanks, can you please let me know what is prop alternative when vanilla javascript? — NIKHIL CHANDRA ROY, Aug 27 '20 at 08:54
`.prop()` is properties of which there are many, in this case it's `.checked` which is a boolean, true or false — StudioTime, Aug 27 '20 at 08:59

How to control checkbox checked attribute from different checkbox?

1 Answers1