I have radio button inside li element,
I would like to change the background color of the li (the parent div) once the radio button checked. I succeeded to set hover on the li by CSS, but it seems like the :checked not works on parent div.
This is my html + css code:
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category"><label class="selectit"><input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label></li>
<li id="job_listing_category-73"><label class="selectit"><input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label></li>
<li id="job_listing_category-75"><label class="selectit"><input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label></li>
<li id="job_listing_category-76"><label class="selectit"><input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label></li>
<li id="job_listing_category-80"><label class="selectit"><input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label></li>
<li id="job_listing_category-86"><label class="selectit"><input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label></li>
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label></li>
</ul>
</div>
I will appreciate any help about this issue,
Thanks
While you've already accepted an answer I'd suggest, if using plain – non-library – JavaScript is preferred, the following:
// named function to handle the changes:
function toggleParentStyle(opts) {
// the default settings:
var settings = {
// activeClass: String, the class-name by
// which the 'active'/'on' state is denoted:
'activeClass': 'active',
// targetElementSelector: String,
// the CSS selector to identify the elements
// whose style is to be altered:
'targetElementSelector': 'li',
// uniquelyActive: Boolean, determines
// whether only one element can have the
// 'active' state/'activeClass' class-name:
'uniquelyActive' : true
},
// caching the 'this' Node:
trigger = this;
// iterating over the (possibly) passed-in opts
// Object that can be used to override the
// default settings:
for (var prop in opts) {
// if the opts Object has prop as an
// own-property (one not inherited from
// the Object's prototype):
if (opts.hasOwnProperty(prop)) {
// we update the relevant property of
// the settings Object to be equal to
// that of the opts Object:
settings[prop] = opts[prop];
}
}
// caching the targetElementSelector and activeClass
// with shorter names (for convenience):
var selector = settings.targetElementSelector,
c = settings.activeClass,
// caching the closest ancestor of the element
// triggering the function that matches the
// selector:
ancestor = trigger.closest(selector),
// finding the currently-active element (if any),
// moving from the found ancestor element:
selectedSibling = ancestor
// to its parentNode:
.parentNode
// finding the first/only element in that
// parent element that matches the selector
// and has the class-name:
.querySelector(selector + '.' + c);
// if settings.uniquelyActive is true, and
// there is a selected-sibling:
if (settings.uniquelyActive && selectedSibling) {
// we remove the class-name:
selectedSibling.classList.remove( c );
}
// here we access the ancestor element's classList,
// and if the ancestor.classList.contains the class-name
// (Boolean true) we use the 'remove' method, if it does not
// contain the class-name (Boolean false) we use the 'add'
// method, and pass the class-name as an argument:
ancestor.classList[ancestor.classList.contains( c ) ? 'remove' : 'add'](c);
// Note: for radio inputs this isn't necessary, as a radio
// can't be changed by clicking it, but this might be a
// necessary check were check-box inputs to be used instead.
}
// finding all the radio-inputs in the document:
var radios = document.querySelectorAll('input[type=radio]'),
// converting the HTMLCollection into an Array, using
// Array.prototype.slice and Function.prototype.call():
radiosArray = Array.prototype.slice.call(radios, 0);
// iterating over the radiosArray using Array.prototype.forEach():
radiosArray.forEach(function(radio) {
// binding the toggleParentStyle to handle the change
// event of the radio inputs:
radio.addEventListener('change', toggleParentStyle);
});
function toggleParentStyle(opts) {
var settings = {
'activeClass': 'active',
'targetElementSelector': 'li',
'uniquelyActive': true
},
trigger = this;
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
settings[prop] = opts[prop];
}
}
var selector = settings.targetElementSelector,
ancestor = trigger.closest(selector),
c = settings.activeClass,
selectedSibling = ancestor
.parentNode
.querySelector(selector + '.' + c);
if (settings.uniquelyActive && selectedSibling) {
selectedSibling.classList.remove(c);
}
ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);
}
var radios = document.querySelectorAll('input[type=radio]'),
radiosArray = Array.prototype.slice.call(radios, 0);
radiosArray.forEach(function(radio) {
radio.addEventListener('change', toggleParentStyle);
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
li.active {
background-color: limegreen;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
JS Fiddle demo
To show the above using radio <input> elements, but passing in different settings:
radiosArray.forEach(function(radio) {
radio.addEventListener('change', function () {
// using Function.prototype.call()
// to set the function's 'this' (the radio input),
// and passing an Object as the second argument to
// contain the Opts Object:
toggleParentStyle.call(this, {
// allowing multiple elements to be styled as active:
'uniquelyActive' : false,
// passing in a different class-name:
'activeClass' : 'anAlternativeClassName'
});
});
});
function toggleParentStyle(opts) {
var settings = {
'activeClass': 'active',
'targetElementSelector': 'li',
'uniquelyActive': true
},
trigger = this;
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
settings[prop] = opts[prop];
}
}
var selector = settings.targetElementSelector,
ancestor = trigger.closest(selector),
c = settings.activeClass,
selectedSibling = ancestor
.parentNode
.querySelector(selector + '.' + c);
if (settings.uniquelyActive && selectedSibling) {
selectedSibling.classList.remove(c);
}
ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);
}
var radios = document.querySelectorAll('input[type=radio]'),
radiosArray = Array.prototype.slice.call(radios, 0);
radiosArray.forEach(function(radio) {
radio.addEventListener('change', function () {
toggleParentStyle.call(this, {
'uniquelyActive' : false,
'activeClass' : 'anAlternativeClassName'
});
});
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
li.active {
background-color: limegreen;
}
li.anAlternativeClassName {
background-color: #f90;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
JS Fiddle demo.
And showing how it might be used for check-boxes:
// selecting inputs of type=checkbox:
var checkboxes = document.querySelectorAll('input[type=checkbox]'),
// convert checkboxes HTMLCollection to an Array:
checkboxArray = Array.prototype.slice.call(checkboxes, 0);
// exactly as above, but passing in different elements:
checkboxArray.forEach(function(check) {
check.addEventListener('change', function () {
toggleParentStyle.call(this, {
// ensuring multiple checkbox ancestors can be
// selected:
'uniquelyActive' : false,
'activeClass' : 'anAlternativeClassName'
});
});
});
function toggleParentStyle(opts) {
var settings = {
'activeClass': 'active',
'targetElementSelector': 'li',
'uniquelyActive': true
},
trigger = this;
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
settings[prop] = opts[prop];
}
}
var selector = settings.targetElementSelector,
ancestor = trigger.closest(selector),
c = settings.activeClass,
selectedSibling = ancestor
.parentNode
.querySelector(selector + '.' + c);
if (settings.uniquelyActive && selectedSibling) {
selectedSibling.classList.remove(c);
}
ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);
}
var checkboxes = document.querySelectorAll('input[type=checkbox]'),
checkboxArray = Array.prototype.slice.call(checkboxes, 0);
checkboxArray.forEach(function(check) {
check.addEventListener('change', function() {
toggleParentStyle.call(this, {
'uniquelyActive': false,
'activeClass': 'anAlternativeClassName'
});
});
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
li.active {
background-color: limegreen;
}
li.anAlternativeClassName {
background-color: #f90;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
JS Fiddle demo.
References:
Array.prototype.forEach().
Array.prototype.slice().
Document.querySelector().
Document.querySelectorAll().
Element.classList.
Element.closest().
EventTarget.addEventListener().
for...in.
Function.prototype.call().
Node.parentNode.
Object.hasOwnProperty().
This should do it:
function updateHighlightRadio() {
var selected = this.parentNode.parentNode.parentNode.getElementsByClassName("selected")[0];
if (selected) selected.className = selected.className.replace(" selected", "");
this.parentNode.parentNode.className += " selected";
}
function updateHighlightCheckbox() {
var selected = this.parentNode.parentNode;
if (!this.checked)
selected.className = selected.className.replace(" selected", "");
else
this.parentNode.parentNode.className += " selected";
}
window.onload = function () {
var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0; i < radios.length; ++i) {
radios[i].onchange = updateHighlightRadio;
}
var checkboxes = document.querySelectorAll("input[type=checkbox]");
for (var i = 0; i < checkboxes.length; ++i) {
checkboxes[i].onchange = updateHighlightCheckbox;
}
}
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
.job-manager-term-checklist .selected {
background-color: #a2156b;
color: #fff;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
You can create a javascript file and change the class of the element like eg:
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
You will have to change your <li> to eg:
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98" onclick="changeClass(this, "someClass")">7</label></li>
Hope this will point you in the right direction
If I'm understanding your problem correctly, you could do it like this:
form input[type="radio"]:checked + label {
background-color: yellow;
}
http://jsfiddle.net/4pf9cds3/
(Source: Changing background color with CSS on radio button input when :checked )
You can make like this
$('input[type=radio]').on('change', function() {
$('li').each(function(){
$(this).removeClass('active');
});
if($(this).prop('checked')) {
$(this).parent().parent().addClass('active');
}
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
.active {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category"><label class="selectit"><input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label></li>
<li id="job_listing_category-73"><label class="selectit"><input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label></li>
<li id="job_listing_category-75"><label class="selectit"><input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label></li>
<li id="job_listing_category-76"><label class="selectit"><input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label></li>
<li id="job_listing_category-80"><label class="selectit"><input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label></li>
<li id="job_listing_category-86"><label class="selectit"><input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label></li>
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label></li>
</ul>
</div>
Just use this small code :
$('input[name*="tax_input"]').change(function() {
if($(this).is(':checked')) { // Input is checked
$(this).parent().css('background', 'red');
} else {
$(this).parent().css('background', 'white');
}
});
The bad news is you can't do that with CSS only, because of how CSS selectors work.
The good news is, you can do something very close to what you want with CSS only by selecting a sibling of the input, make it cover the whole of the parent and change its bg color.
Related
I set a ul of product variants with horizontal scroll.
When i scroll and click on a variant the page refresh and the scroll return to start.
I need to maintain the posistion where it was first of refresh.
How can i do?
ul#group_17 {
width: 150px;
display: flex;
overflow: auto;
list-style: none;
}
li {margin: 0 10px 0 0}
.input-color {
position: absolute;
opacity: 0;
cursor: pointer;
height: 60px;
width: 60px;
}
span {
height: 60px;
width: 60px;
display: block;
}
<ul id="group_17">
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="87">
<span class="color texture" style="background:black"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="88" checked="checked">
<span class="color texture" style="background:brown;"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="89">
<span class="color texture" style="background:red"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="90">
<span class="color texture" style="background:yellow"></span>
</label>
</li>
</ul>
More information is needed
But you can give an ID to the part of your code that you want and when you click, it will be linked to the same part
you can use this code in js
document.location.reload(true)
or use this in js
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
</script>
I am trying to create tree view of multiple checkbox as tree everything working fine I just not being able to achieve goal to when child checkbox been check let its parent checkbox also checked. I find example from
http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html
<div class="form-group form-show-validation row">
<label for="name" class="col-lg-3 col-md-3 col-sm-4 mt-sm-2 text-right">Permissions <span class="required-label">*</span></label>
<div class="acidjs-css3-treeview col-lg-4 col-md-9 col-sm-8">
<ul>
<li>
<input type="checkbox" id="node-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0">Libraries</label>
<ul>
<li>
<input type="checkbox" id="node-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0">Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0">My Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-0">Downloads</label>
</li>
<li>
<input type="checkbox" id="node-0-0-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-1">Projects</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1">Music</label>
<ul>
<li>
<input type="checkbox" id="node-0-1-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-0">My Music</label>
</li>
<li>
<input type="checkbox" id="node-0-1-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-1">Public Music</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-2" /><label><input type="checkbox" /><span></span></label><label for="node-0-2">Pictures</label>
<ul>
<li>
<input type="checkbox" id="node-0-2-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-0">My Pictures</label>
</li>
<li>
<input type="checkbox" id="node-0-2-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-1">Public Pictures</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-3" checked="checked" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3">Video</label>
<ul>
<li>
<input type="checkbox" id="node-0-3-0" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-0">My Videos</label>
</li>
<li>
<input type="checkbox" id="node-0-3-1" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-1">Public Videos</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Here is javascript code which will be required
<script>
$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
var
checkbox = $(this),
nestedList = checkbox.parent().next().next(),
nestedListp = checkbox.parent().prev().prev(),
selectNestedListCheckbox = nestedList.find("label:not([for]) input:checkbox");
selectNestedListCheckboxp = nestedListp.find("label:not([for]) input:checkbox");
if(checkbox.is(":checked")) {
return selectNestedListCheckbox.prop("checked", true);
return selectNestedListCheckboxp.prop("checked", true);
}
selectNestedListCheckbox.prop("checked", false);
});
</script>
Here is working demo by Fabien
$(function() {
$('input[type="checkbox"]').change(checkboxChanged);
function checkboxChanged() {
var $this = $(this),
checked = $this.prop("checked"),
container = $this.parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(container, checked);
}
function checkSiblings($el, checked) {
var parent = $el.parent().parent(),
all = true,
indeterminate = false;
$el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});
if (all && checked) {
parent.children('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(parent, checked);
}
else if (all && !checked) {
indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
parent.children('input[type="checkbox"]')
.prop("checked", checked)
.prop("indeterminate", indeterminate)
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
checkSiblings(parent, checked);
}
else {
$el.parents("li").children('input[type="checkbox"]')
.prop({
indeterminate: true,
checked: false
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass('custom-indeterminate');
}
}
});
* { margin: 0; padding: 0; }
#page-wrap {
margin: auto 0;
}
.treeview {
margin: 10px 0 0 20px;
}
ul {
list-style: none;
}
.treeview li {
background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat;
padding: 2px 0 2px 16px;
}
.treeview > li:first-child > label {
/* style for the root element - IE8 supports :first-child
but not :last-child ..... */
}
.treeview li.last {
background-position: 0 -1766px;
}
.treeview li > input {
height: 16px;
width: 16px;
/* hide the inputs but keep them in the layout with events (use opacity) */
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.treeview li > label {
background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
/* move left to cover the original checkbox area */
margin-left: -20px;
/* pad the text to make room for image */
padding-left: 20px;
}
/* Unchecked styles */
.treeview .custom-unchecked {
background-position: 0 -1px;
}
.treeview .custom-unchecked:hover {
background-position: 0 -21px;
}
/* Checked styles */
.treeview .custom-checked {
background-position: 0 -81px;
}
.treeview .custom-checked:hover {
background-position: 0 -101px;
}
/* Indeterminate styles */
.treeview .custom-indeterminate {
background-position: 0 -141px;
}
.treeview .custom-indeterminate:hover {
background-position: 0 -121px;
}
<div id="page-wrap">
<h2>Treeview with Custom Checkboxes and Indeterminate State</h2>
<ul class="treeview">
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall" class="custom-unchecked">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1" class="custom-unchecked">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2" class="custom-unchecked">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1" class="custom-unchecked">Andre</label>
</li>
<li class="last">
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2" class="custom-unchecked">Paul Bunyan</label>
</li>
</ul>
</li>
<li class="last">
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3" class="custom-unchecked">Two sandwiches</label>
</li>
</ul>
</li>
<li class="last">
<input type="checkbox" name="short" id="short">
<label for="short" class="custom-unchecked">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1" class="custom-unchecked">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2" class="custom-unchecked">Mushrooms</label>
</li>
<li class="last">
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3" class="custom-unchecked">One Sandwich</label>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="main.js"></script>
Since my first answer below, I have developed a Hybrid HTML Dropdown plugin to solve the general case problem of checked lists and nested lists as well as the option to create thumbnail based check lists fields. So the above problem can now be solved with the following html/js,
function docReady(fn) {
if (document.readyState!='loading'){
fn();
}else if (document.addEventListener){
document.addEventListener('DOMContentLoaded', fn);
}
}
docReady( (e)=>{
let sel= document.querySelector('#nested-list');
let hyd = new HybridDropdown(sel,{});
});
<link href="https://aurovrata.github.io/hybrid-html-dropdown/assets/css/hybrid-dropdown.css" rel="stylesheet"/>
<script src="https://aurovrata.github.io/hybrid-html-dropdown/assets/js/hybrid-dropdown.js"></script>
<div id="nested-list" data-tree-view="true" data-color="#ff26ffc9"
data-background-color="#454d4f">
<script type="application/json">
{
"":"Select a dish",
"Japan":{
"sushi":{
"label":"Sushi",
"ps":"Pumpkin sushi",
"as":"Avocado sushi",
"tc":"Tomato sushi",
"cs":"Carrot sushi"
}
},
"India":{
"dosa":{
"label":"Dosa",
"pd":"Plain dosa",
"md":"Masala dosa",
"myd":"Mysore dosa",
"pr":"Paper roast"
}
}
}
</script>
</div>
I want to add an own class if a list item has an active radio button inside of it.
I tried this code to add a class but I guess there is an error in it:
$('input').change(function() {
var check = $('.wc_payment_method').map(function(e) {
return $(this).find('input[type="radio"]').is(':checked')
}).get()
$('.wc_payment_method').addClass('active');
})
.wc_payment_method {padding: 10rem;}
.active {background-color: #eee;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_creditcard">
<input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
<label for="payment_method_creditcard">Credit card</label>
</li>
</ul>
Loop your inputs using .each()
go for $(this).closest('selector') to target the closest selector
use .toggleClass('className', Boolean) to toggle the class.
const $inp = $('[name="payment_method"]');
$inp.on("change", function() {
$inp.each(function() {
$(this).closest('.wc_payment_method').toggleClass('active', this.checked);
});
});
.active { background: gold; }
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_creditcard">
<input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
<label for="payment_method_creditcard">Credit card</label>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
or don't use JavaScript at all:
Use the :checked pseudo
Target the sibling Label element General Sibling Combinator selector ~
/* Style the adjacent LABEL instead */
.input-radio:checked ~ label {
background: gold;
}
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_creditcard">
<input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
<label for="payment_method_creditcard">Credit card</label>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
enter image description hereI need to create checkbox structure with the following conditions:-
When a parent checkbox is selected, all child checkboxes should get selected automatically.
If all child checkboxes are unselected, then the parent checkbox should get unchecked automatically.
If single child checkboxes are selected, then the parent checkbox should get selected automatically.
...this is how it should look like : -[this is how it should look like
this is my code. But it doesn't seems to satisfy 2nd condition. I think my logic is right but somewhere there is syntax problem. Please explain the changes you suggest or make. Thanks a ton in advance.
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
<!--$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});--->
<script>
$(document).ready(function(){
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
//$("input").click(function() {
//$(this).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
//});
$('.selecter').find('input').each(function(index, input) {
$("input").on("change", function(){
var checkbox = $(this);
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
}else{
var checkbox = $(this).parents("li").siblings("li").find("input");
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}
else{
$(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
}
}
});
});
});
</script>
<!--else{
// var checkbox = $(this).parents("li").siblings("li").find("input");
// var is_checked = $(checkbox).is(':checked');
// if(is_checked) {
// $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}else{
// $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
/// }
// }}
// });
// });--->
</body>
</html>
I'd add a class to the group and to the child checkboxes for easier selection.
Your parent selector function is good, though I wrote it as below. The child selector function should update based on if any boxes are ticked or not; you can use the .length property to get the number of checked child boxes.
Jsfiddle
$(document).ready(function() {
//check/uncheck any siblings
$('.selecter input.parchek').click(function() {
$(this).closest("div.checkgroup").find(".childchek").prop("checked", this.checked);
});
//check/uncheck parent
$('.selecter input.childchek').click(function() {
var numChecked = $(this).closest("div.checkgroup").find(".childchek:checked").length;
$(this).closest("div.checkgroup").find(".parchek").prop("checked", (numChecked > 0));
});
});
You had two errors:
This was not returning the correct valuevar is_checked = $(checkbox).is(':checked');, instead you could have used the already defined checkbox element checkbox.is(':checked');
Instead of using .removeAttr() in $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked'); you chould have used .prop('checked', false);
Corrected code below:
$(document).ready(function() {
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
$('.selecter').find('input').each(function(index, input) {
$(this).on("change", function() {
var checkbox = $(this);
var is_checked = checkbox.is(':checked');
if (is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
} else {
let checkboxes = $(this).parents("ul").find("input");
if (allCheckBoxesUnChecked(checkboxes)) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', false);
}
}
});
});
// helper function that checks if all checkboxes are unchecked
function allCheckBoxesUnChecked(elems) {
let allUnchecked = true;
$.each(elems, function(ind, item) {
if (item.checked) {
allUnchecked = false;
return;
}
});
return allUnchecked;
}
});
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
</body>
</html>
Hello i need to have a indeterminate check boxes, when i click on a checkbox, the check boxes under this one must be selected automatically.
I don't know what is the problem with this code, this property doesn't work.
I think the problem is with JS code.
<html>
<style>
body {
padding: 20px;
}
ul {
list-style: none;
margin: 5px 20px;
}
li {
margin: 10px 0;
}
</style>
<script language="Javascript">
$('input[type="checkbox"]').change(function(e) {
var checked = $(this).prop("checked"),
container = $(this).parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked });
function checkSiblings(el) {
var parent = el.parent().parent(),
all = true;
el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); });
if (all && checked) {
parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked });
checkSiblings(parent);}
else if (all && !checked) {
parent.children('input[type="checkbox"]').prop("checked", checked);
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);}
else {
el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: false });}}
checkSiblings(container);
});
</script>
<body>
<h1>Indeterminate Checkboxes</h1>
<ul>
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1">Andre</label>
</li>
<li>
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2">Paul Bunyan</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3">Two sandwiches</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="short" id="short">
<label for="short">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2">Mushrooms</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">One Sandwich</label>
</li>
</ul>
</li>
</ul>
</body>
</html>
Working fine. Just add Jquery dependency.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Expression like $(???) in your code, meaning jQuery selector.
In this case, you use element selector. https://api.jquery.com/element-selector/
<!DOCTYPE html>
<html>
<style>
body {
padding: 20px;
}
ul {
list-style: none;
margin: 5px 20px;
}
li {
margin: 10px 0;
}
</style>
<!-- ***** ADDED Start ***** -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- ***** ADDED End ***** -->
<script language="Javascript">
$('input[type="checkbox"]').change(function (e) {
var checked = $(this).prop("checked"),
container = $(this).parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
function checkSiblings(el) {
var parent = el.parent().parent(),
all = true;
el.siblings().each(function () {
return all =
($(this).children('input[type="checkbox"]').prop("checked") === checked);
});
if (all && checked) {
parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
checkSiblings(parent);
}
else if (all && !checked) {
parent.children('input[type="checkbox"]').prop("checked", checked);
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);
}
else {
el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: false
});
}
}
checkSiblings(container);
});
</script>
<body>
<h1>Indeterminate Checkboxes</h1>
<ul>
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1">Andre</label>
</li>
<li>
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2">Paul Bunyan</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3">Two sandwiches</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="short" id="short">
<label for="short">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2">Mushrooms</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">One Sandwich</label>
</li>
</ul>
</li>
</ul>
</body>
</html>