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
– elpmid, Commented Aug 27, 2020 at 8:47
Off topic: why does setting it use a doc.ready, but clearing it doesn't? — fdomn-m
– fdomn-m, Commented Aug 27, 2020 at 9:04

Carsten Løvbo Andersen · Accepted Answer · 2020-08-27 08:46:59Z

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?
.prop() is properties of which there are many, in this case it's .checked which is a boolean, true or false

Collectives™ on Stack Overflow

How to control checkbox checked attribute from different checkbox?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related