I am a beginner in JavaScript and I can't figure out that how can I get the index of li whose checkbox is checked and add/remove the CSS class cut to that particular li.
I tried parent methods but that was not working maybe I was not doing in a proper manner!
for instance, I intentionally added the CSS cut class to the last li but I want to add this class to li when the checkbox is checked.
function myfunction() {
}
.cut {
text-decoration: line-through;
opacity: 0.4;
}
#mylist {
list-style: none;
}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction()">
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction()">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck cut">
<input type="checkbox" class="status" checked onclick="myfunction()">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>
You can pass this keyword to the function so that you can identify the closest li element of the clicked checkbox:
function myfunction(el){
if(el.checked){
el.closest('li').classList.add('cut');
}
else{
el.closest('li').classList.remove('cut');
}
}
.cut{
text-decoration: line-through;
opacity: 0.4;
}
#mylist{list-style: none;}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)" >
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>
Attaching event using JavaScript:
var checkboxes = document.querySelectorAll('.mycheck .status');
checkboxes.forEach(function(chk){
chk.addEventListener('click', function(){
myfunction(this);
});
})
function myfunction(el){
if(el.checked){
el.closest('li').classList.add('cut');
}
else{
el.closest('li').classList.remove('cut');
}
}
.cut{
text-decoration: line-through;
opacity: 0.4;
}
#mylist{list-style: none;}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" >
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status">
<label class="mytodo">set clothes</label>
</li>
</ul>
</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>
Looking to have it so that when the first checkbox is selected (geographic_checkbox), a further 2 checkboxes are displayed (regions,cities &towns_checkbox and ringfencing_checkbox), but for some reason my code is not working.
$('#geographic_checkbox').on('click', function() {
if (this.checked) {
$('#geographic_suboptions').removeClass('hidden');
} else {
$('#geographic_suboptions').addClass('hidden');
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="targeting">
<h1>Targeting</h1>
<ul>
<li>
<input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox" onclick="GeographicFunction()">Geographic<br>
<p id="geographic_text" style="display:none">+£0.08 CPC</p>
<div id="geographic_suboptions" class="hidden">
<ul>
<li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox" onclick="RegionsFunction()">Regions, Cities & Towns<br></li>
<p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
<li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox" onclick="RingfencingFunction()">Ring-Fencing<br></li>
<p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
</ul>
</div>
</li>
</ul>
</div>
Actually for such a feature you not really need javascript since css provide the :checked selector:
.hidden {
display: none;
}
ul input:checked ~ #geographic_suboptions {
display: inline;
}
<div class="targeting">
<h1>Targeting</h1>
<ul>
<li>
<input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox">Geographic<br>
<p id="geographic_text" style="display:none">+£0.08 CPC</p>
<div id="geographic_suboptions" class="hidden">
<ul>
<li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox">Regions, Cities & Towns<br></li>
<p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
<li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox">Ring-Fencing<br></li>
<p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
</ul>
</div>
</li>
</ul>
</div>
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>
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.