Basically I am trying to write a js func that if I check a child checkbox the parent checkbox also checks, if not already checked. I am using jquery here is my html:
<div class="checkboxes right">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده </label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>
<script>
$(document).ready(function() {
$('.child input').change(function() {
if ($(this).is(':checked')) {
$(this).closest('ul').siblings('input:checkbox').attr('checked', true);
}
});
});
</script>
You just have to traverse the DOM to get to the "parent" checkbox. Going up two levels of parents will take you to <div class="child"> and .prev() will select the label before the div. Finally, .find("input") will locate the input element for the parent's label.
I had to remove the for attributes because they were causing issues (and aren't necessary in this case), and having a bunch of the same ids isn't good, either.
$(document).ready(function() {
$('.child input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().parent().prev().find("input").prop('checked', true);
}
});
});div.child {
padding-left: 2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxes right">
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده </label>
<div class="child">
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
</div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<div class="child">
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
<label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments