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