Dropdown checkboxes and unchecked parents element?
I must confess I am still not 100% sure I understand - probably because I am not an English native speaker and have a harder time reading complicated issues, but I tried:
You could add a function that looks for children and sets a class has-children if there are children:
$('.new-checkbox ul')
.find("input[type=checkbox]")
.parent()
.each(function(i, elem) {
if ($(elem).find("ul").length > 0) {
$(this).addClass('has-children');
}
});
Then add a CSS rule that takes away the artificial checkboxes on those <input> tags where the parent <li> has the class has-children set:
.new-checkbox .has-children > input[type="checkbox"]:checked + label:before {
content: " ";
}
I have created an updated JSBin demo that shows the result.
Check and Uncheck Parent/Child Checkboxes using Jquery
Update
Added a "Check All" box in the <thead>
Added the third state called indeterminate which is applied to a .parent or #all when some of their subordinate checkboxes are checked.
Assigned .child class to the subordinate checkboxes just to make it a little easier to follow hopefully. Details are commented in the example.
// *️⃣ Code for indeterminate state - There are comments for removal
// Bind all checkboxes to the change event
$(':checkbox').on('change', checkUncheck);
function checkUncheck(e) {
// The tag the user checked/unchecked
const $this = $(this);
// Reference to the closest <tr>
const $row = $this.closest('tr');
/*
If the user clicked a .parent...
...and if it is checked...
... .find() all the <td> of $row...
...and check them all...
...otherwise uncheck them all
*/
if ($this.is('.parent')) {
if ($this.is(':checked')) {
$row.find('.child').prop('checked', true);
} else {
$row.find('.child').prop('checked', false);
}
}
/*
If the user checked/unchecked a .child...
... .makeArray() of all of $row .child and...
... if .every() <td> is .checked then check .parent
... and if .some() <td> are .checked then .parent is...
... indeterminate, otherwise uncheck .parent
*/
if ($this.is('.child')) {
$row.find('.parent').prop('indeterminate', false); //*️⃣
const chxArray = jQuery.makeArray($row.find('.child'));
let rowChecked = chxArray.every(cb => cb.checked); //*️⃣
let someChecked = chxArray.some(cb => cb.checked);
if (rowChecked) { /* if (someChecked) { */ //*️⃣
$row.find('.parent').prop('checked', true);
} else if (someChecked) {
$row.find('.parent').prop('indeterminate', true); //*️⃣
} else {
$row.find('.parent').prop('checked', false);
}
}
/*
If the user clicked #all...
...and if it is checked...
... .find() all the <td> of $tB...
...and check them all...
...otherwise uncheck them all
*/
if ($this.is('#all')) {
$('.parent').prop('indeterminate', false); //*️⃣
if ($this.is(':checked')) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
}
/*
If the user checked/unchecked a .child or .parent...
... .makeArray() of all of <td> in <tbody> and...
... if .every() <td> is checked...
... #all is checked and if .some() <td> are checked...
... then #all is indeterminate...
... otherwise uncheck #all
*/
let allArray = jQuery.makeArray($(':checkbox').not('#all'));
if (allArray.every(cb => cb.checked)) {
$('#all').prop('indeterminate', false); //*️⃣
$('#all').prop('checked', true); /* Move to: ✳️ */
} else if (allArray.some(cb => cb.checked)) {
$('#all').prop('indeterminate', true); //*️⃣ ✳️
} else {
$('#all').prop('indeterminate', false); //*️⃣
$('#all').prop('checked', false);
}
}<table><thead><tr><th><label><input type=checkbox id=all></label><th>All Modules<th><tbody><tr><td><label><input type=checkbox class=parent name=mod[6] value=1></label><td><span>Parent Module</span><td><label><input type=checkbox class=child name=mod[7] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[8] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[9] value=1> Sub Module</label><tr><td><label><input type=checkbox class=parent name=mod[6] value=1></label><td><span>Parent Module</span><td><label><input type=checkbox class=child name=mod[7] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[8] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[9] value=1> Sub Module</label><tr><td><label><input type=checkbox class=parent name=mod[6] value=1></label><td><span>Parent Module</span><td><label><input type=checkbox class=child name=mod[7] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[8] value=1> Sub Module</label> <label><input type=checkbox class=child name=mod[9] value=1> Sub Module</label></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>when uncheck all the childs parent check box also should be unchecked using jquery
You just forgot one corner case below one
if($ul.get(0))
if($ul.find(':checkbox:checked').length !== 0)
$parent.prop('checked', true)
$(function() { $('li :checkbox').on('click', function() { var $chk = $(this), $li = $chk.closest('li'), $ul, $parent; if ($li.has('ul')) { $li.find(':checkbox').not(this).prop('checked', this.checked) } do { $ul = $li.parent(); $parent = $ul.siblings(':checkbox'); if ($chk.is(':checked')) { $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) } else { $parent.prop('checked', false) }// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^// if($ul.get(0)) if($ul.find(':checkbox:checked').length !== 0) $parent.prop('checked', true) // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^// $chk = $parent; $li = $chk.closest('li'); } while ($ul.is(':not(.someclass)')); });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><div id="1" class="tab-pane fade in active"> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='5'>A1 <ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='26'>a2 <ul> <li class='chkbox' ;> <input type='checkbox' class='myCheckbox' name='names[]' value='29'>a3 <li class='chkbox' ;> <input type='checkbox' class='myCheckbox' name='names[]' value='30'>a4 </ul> <li class='chkbox'> <input type='checkbox' class='myCheckbox' name='names[]' value='25'>a1 <ul> <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='27'>aaaaaa <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='28'>abbbbbb </ul> </ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='6'>A2 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='7'>A3 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='8'>A4 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='9'>A5 <div style="clear:both"> </div></div><div id="2" class="tab-pane fade"> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='10'> B1 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='11'>B2 <div style="clear:both"> </div></div><div id="3" class="tab-pane fade"> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='12'>C1 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='13'>C2 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='14'>C3 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='17'>A6 <ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='19'>A8 <ul> <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='21'>A10 <ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='23'>A13 <ul> <li class='chkbox' ;><input type='checkbox' name='names[]' value='31'>jjj <li class='chkbox' ;><input type='checkbox' name='names[]' value='32'>kkk </ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='24'>A14 <ul> </ul> </ul> <li class='chkbox' ;><input type='checkbox' class='myCheckbox' name='names[]' value='22'>A11 </ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='20'>A9 </ul> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='18'>A7 <div style="clear:both"></div></div><div id="4" class="tab-pane fade"> <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='15'>D1 <li class='chkbox'><input type='checkbox' class='myCheckbox' name='names[]' value='16'>D2 <div style="clear:both"></div>Uncheck the parent checkbox on unchecking child elements in React App
Add checked attribute to Select All input instead of passing defaultChecked attribute.
<Box horizontal align="center">
<input type="checkbox"
onChange={onCheckAllcheckbox}
checked={props.items.every((item) => item.isChecked)}
style={{width: '20px', height: '15px'}} />
<Text>SELECT ALL</Text>
</Box>
Uncheck all child if parent checkbox is unchecked
As you've tagged this with jQuery, it's pretty easy. Add a class to the "additional info" section and we can use this as an easy hook as a sibling of the original checkbox.
$(document).ready(function(){$("input[type=checkbox]").on("click", function(){ //if the checkbox has a sibling qwith the additional-info class if($(this).siblings(".additional-info").length > 0){ //if the checkbox is uncheckd if(!$(this).is(":checked")){ //uncehck the checkbox $(this).siblings(".additional-info").find("[type=checkbox]").prop("checked", false); } }})});input { position: absolute; left: -9999px;}
label { display: block; padding: 15px 30px 15px 15px; border: 3px solid #fff; border-radius: 100px; color: #fff; background-color: #6a8494; box-shadow: 0 0 20px rgba(0, 0, 0, .2); white-space: nowrap; user-select: none; transition: background-color .2s, box-shadow .2s; width: 300px;}
label::before { display: block; position: absolute; top: 10px; bottom: 10px; left: 10px; width: 32px; border: 3px solid #fff; border-radius: 100px; transition: background-color .2s;}
label:hover, input:focus + label { box-shadow: 0 0 20px rgba(0, 0, 0, .6);}
input:checked + label { background-color: #ab576c;}
input:checked + label::before { background-color: #fff;}
div { display: none; appearance: none; margin: 40px auto 0; padding: 5px 40px; border: 2px solid #fff; color: rgba(0, 0, 0, .8); background-color: #9ab593; font-family: inherit; font-size: inherit; font-weight: bold; cursor: pointer;}
#permitted:checked ~ #bodyparts { display: block;}
#neck:checked ~ #direction { display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><section> <input id="permitted" type="checkbox"> <label for="permitted" class="side-label">Click to show more options</label> <div id="bodyparts"> <input id="head" type="checkbox"> <label for="head">head</label> <input id="neck" type="checkbox"> <label for="neck">neck (click for more options)</label> <div id="direction" class="additional-info"> <input id="left" type="checkbox"> <label for="left">left</label> <input id="right" type="checkbox"> <label for="right">right</label> <input id="both" type="checkbox"> <label for="both">both</label> </div> <input id="middle-back" type="checkbox"> <label for="middle-back">middle back</label> <input id="lower-back" type="checkbox"> <label for="lower-back">lower back</label> </div></section>Check or uncheck the parent parents check box using jquery
Try this
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes">Account Settings
<ul>
<li>
<input class="account_settings" type="checkbox" name="one" value="one">AS One
</li>
<li>
<input class="account_settings" type="checkbox" name="two" value="two">AS Two
</li>
<li>
<input class="account_settings" type="checkbox" name="user_roles" value="user_roles">Users & Roles
<ul>
<li>
<input class="account_settings user_roles" type="checkbox" name="user_role" value="add">Add
</li>
<li>
<input class="account_settings user_roles" type="checkbox" name="user_role" value="delete">Delete
</li>
</ul>
</li>
</ul>
</li>
</ul>
$('input[type=checkbox]').click(function () {
if($(this).prop('checked'))
{
$('.'+$(this).attr('name')).prop('checked',true);
}
else
{
$('.'+$(this).attr('name')).prop('checked',false);
}
findparent(this);
});
});
function findparent(elem)
{
var flag = 1;
var fcount = 0;
var count = 0;
$(elem).parent().parent().find('li input').each( function ( index ) {
fcount = fcount +1;
if($(this).prop('checked') == false)
count = count + 1;
});
if(count == fcount)
flag = 0;
if(flag == 0)
$(elem).parent().parent().prev().prop('checked',false);
else
$(elem).parent().parent().prev().prop('checked',true);
}
JQuery: Checkbox how to uncheck child and subchild when parent is unchecked
After modified i think this version is perfect: http://jsfiddle.net/YDgHN/21/
not forget credit to other that helped me here:
1) JQuery: uncheck subchild checkbox inside ul li
2) JQuery: Checkbox with 3 level auto select child or parent
<table border="1">
<tr>
<td>Parent</td>
<td>Child</td>
</tr>
<tr>
<td><input type="checkbox" data-level="parent" name="someparent1" value="1" />Parent 1</td>
<td>
<ul>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename1" value="1" /> Child 1</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename2" value="2" /> Child 2 <br />
<ul>
<li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename1" value="3" />Sub Child 1</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename2" value="3" />Sub Child 2</li>
</ul>
</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename3" value="3" /> Child 3</li>
</ul>
</td>
</tr>
<tr>
<td><input type="checkbox" data-level="parent" name="someparent1" value="1" />Parent 2</td>
<td>
<ul>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename1" value= "1" /> Child 1<br />
<ul>
<li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename1" value="3" />Sub Child 1</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename2" value="3" />Sub Child 2</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename3" value="3" />Sub Child 3</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename4" value="3" />Sub Child 4</li>
</ul>
</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename2" value="2" /> Child 2</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename3" value="3" /> Child 3</li>
</ul>
</td>
</tr>
<tr>
<td><input type="checkbox" data-level="parent" name="someparent1" value="1" />Parent 3</td>
<td>
<ul>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename1" value="1" /> Child 1</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename2" value="2" /> Child 2</li>
<li style="list-style-type:none;"><input type="checkbox" data-level="child" name="somename3" value="3" /> Child 3<br />
<ul>
<li style="list-style-type:none;"> Others Reason: <input type="text" data-level="subchild" size="50" name="other" /></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
JScode:
// ########################### for click child to check parent ###########################
$('input[type=checkbox][data-level="child"]').click(function (event) {
var checked = $(this).is(':checked');
if (checked) { //when child checked
$(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', true);
} else { //when child un-checked
//for click uncheck child to uncheck subchild
$(this).parent().find('input[type=checkbox][data-level="subchild"]').prop('checked', false);
//for clear text field on current table row
$(this).parent().find('input[type=text][data-level="subchild"]').val('');
//to count checked child
var countcheckedchild = $(this).closest('ul').find('input[type=checkbox][data-level="child"]:checked').length;
//if checked child == 0 then we uncheck the parent
if (countcheckedchild == 0)
{
$(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', false);
}
}
});
//########################### for click parent to uncheck child+subchild+clear textfield ###########################
$('input[data-level=parent]').click(function() {
//for uncheck all checkbox on current table row
$(this).parent().next().find(':checkbox').prop('checked', false);
//for clear text field on current table row
$(this).parent().next().find('input[type=text][data-level="subchild"]').val('');
});
//########################### for click subchild to select child+parent ###########################
$('input[type=checkbox][data-level="subchild"]').click(function (event) {
var checked = $(this).is(':checked');
if (checked) { //when subchild checked
// to check parent
$(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', true);
//to check child
$(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', true);
} else { //when subchild unchecked
//count how many checked subchild left
var countcheckedsubchild = $(this).closest('ul').find('input[type=checkbox][data-level="subchild"]:checked').length;
//if checked child == 0 then we uncheck the child
if (countcheckedsubchild == 0)
{
$(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', false);
// to count how many child selected
var countcheckedchild2 = $(this).parents().find('input[type=checkbox][data-level="child"]:checked').length;
//if checked child == 0 then we uncheck the parent
if (countcheckedchild2 == 0)
{
$(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', false);
}
}
}
});
//########################### for subchild textfield ###########################
$('input[type=text][data-level="subchild"]').keyup(function(event) {
var keyvalx = $(this).val();
//if the value of the text area is not empty
if (keyvalx != '') {
// to check parent
$(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', true);
//to check child
$(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', true);
} else {
$(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', false);
// to count how many child selected
var countcheckedchild3 = $(this).parents().find('input[type=checkbox][data-level="child"]:checked').length;
//if checked child == 0 then we uncheck the parent
if (countcheckedchild3 == 0)
{
$(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', false);
}
}
});
hope it can help any one else who need it.
Uncheck parent checkbox if one child is unchecked
A possible solution
Add a class someclass to the topmost ul element then
$('.someclass :checkbox').bind('click', function () {
var $chk = $(this), $li = $chk.closest('li'), $ul, $parent ;
if($li.has('ul')){
$li.find(':checkbox').not(this).prop('checked', this.checked)
}
do{
$ul = $li.parent();
$parent = $ul.siblings(':checkbox');
if($chk.is(':checked')){
$parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
} else {
$parent.prop('checked', false)
}
$chk = $parent;
$li = $chk.closest('li');
} while($ul.is(':not(.someclass)'));
});
Demo: Fiddle
Checkboxes with parent and child selections
You need to use .prop() instead of .attr() also, use .closest() to find the closest ancestor element matching the selector.
jQuery(function ($) {
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(function () {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
});
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(function () {
var $fs = $(this).closest('fieldset');
$fs.find('.parentCheckBox').prop('checked', !$fs.find('.childCheckBox').is(':not(:checked)'))
});
});
Demo: Fiddle
Related Topics
Navigate to Screen After Opening a Notification
Android - Parse Js Generated Urls with Jsoup
Why Do Developers Append a Query String in JavaScript Files' Stylesheet Links
Are There Any Standards for Mobile Device Web Browsers in Terms of Thread Sleeping
How to Conditionally Change CSS Styles with Js
In Android Webview, am I Able to Modify a Webpage's Dom
Android Webview JavaScript from Assets
Facebook Oauth "Unsupported" in Chrome on iOS
JavaScript Keypress Event Not Raised on Android Browser
Android Webview, Loading JavaScript File in Assets Folder
Detect Android Phone via JavaScript/Jquery
Disable Inertia Scroll for "Single-Page" Webapp
How to Clear React-Native Cache
Attempt to Add a Rule to a CSS Stylesheet Gives "The Operation Is Insecure" in Firefox
Iscroll 4 Not Working with Form <Select> Element iPhone Safari and Android Browser
How to Build SASS/Less/CSS in Webpack Without Requiring Them in My Js