HTML change radio button background - javascript

I would like the background color to remain the same foreach <ul> as lightgray.
Currently when clicking the radio button, it will change the ul background wrongly. I dont know how to make the jquery script loop thru all the ul available, I would really appreciate it if the script can be small, as this concept will be applied to 100+ ul
$(document).ready(function() {
$("ul.options-list li").on("click",function() {
if($(this).find('input[type="radio"]').is(':checked')) {
$('ul.options-list li').removeClass('change_color');
$(this).addClass('change_color');
}
});
});
ul.options-list li.change_color{
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Q1
<ul class="options-list">
<li>
<input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
</li>
<li>
<input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
</li>
</ul>
</div>
<div>
Q2
<ul class="options-list">
<li>
<input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
</li>
<li>
<input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
</li>
</ul>
</div>

You can loop through your ul li using each loop then use $(this) to check if the radio is checked depending on this add or remove your class.
Demo Code :
$(document).ready(function() {
$("ul.options-list li").on("click", function() {
//loop through ul li
$("ul.options-list li").each(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).addClass('change_color');//add change_Color
} else {
$(this).removeClass('change_color');//remove same
}
})
});
});
ul.options-list li.change_color {
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Q1
<ul class="options-list">
<li>
<input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
</li>
<li>
<input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
</li>
</ul>
</div>
<div>
Q2
<ul class="options-list">
<li>
<input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
</li>
<li>
<input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
</li>
</ul>
</div>

I am not great with javascript.
but maybe give all your radio buttons the same class and add something like this
document.getElementByClass("myCheck").checked = true;
and then addClass('change_color') to those selected.
https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Related

Checkbox rows - slideUp complete issue

I have multiple divs of 3 checkboxes – each div has a show/hide button (jQuery slideUp) that hides the 'ul.task-list' to display the H2 heading.
<div class="row" id="row-0">
<button class="toggle">Toggle</button>
<h2>Row 0</h2>
<ul class="task-list">
<li><input type="checkbox" id="task-0-0" class="task" value="0" /></li>
<li><input type="checkbox" id="task-0-1" class="task" value="1" /></li>
<li><input type="checkbox" id="task-0-2" class="task" value="2" /></li>
</ul>
</div>
<div class="row" id="row-1">
<button class="toggle">Toggle</button>
<h2>Row 1</h2>
<ul class="task-list">
<li><input type="checkbox" id="task-1-0" class="task" value="0" /></li>
<li><input type="checkbox" id="task-1-1" class="task" value="1" /></li>
<li><input type="checkbox" id="task-1-2" class="task" value="2" /></li>
</ul>
</div>
I call a 'checkTotal' function, and if everything in the row is checked, add the class of "complete" and slideUp the UL.
let sections = $('.row').map(function() { return this.id }).get(); // gets id of row
const tasksTotal = 3; // the total checkboxes in each row
function checkTotal() {
sections.forEach(function(i) { // loops section IDs
let total = $('#'+i+' input:checked').length; // checked in row
total == tasksTotal ? ($('#'+i).addClass('complete'), $('#'+i+' .task-list').slideUp()) : ($('#'+i).removeClass('complete')); // add class & hide row
});
}
checkTotal();
The issue is, if I click to show row 0 (after complete) and then check anything in row 1 – it will automatically slide row 0 up again – as complete remains true (all items are checked).
I just can't figure out how to separate these, so they act independently and without looping through again.
You can passed this under your checkTotal() function which will be used to check only the checkbox which is check by user.Then we can use this to get closest ul and loop through only that part where checkbox is located and then to we need to find checkbox length which are checked we can get that using elem.find("input:checked").length.
Demo Code :
jQuery(function() {
jQuery('.toggle').on('click', function() {
jQuery(this).parent().siblings('.task-list').slideToggle();
});
const tasksTotal = 3; // the total checkboxes in each row
function checkTotal(el) {
//find closest ul
var elem = jQuery(el).closest(".task-list");
//loop through it
elem.each(function() {
//get total count of checked input
let total = elem.find("input:checked").length;
console.log(total)
//apply the same to particular ul
total == tasksTotal ? (elem.addClass('complete'), elem.slideUp()) : (elem.removeClass('complete'));
});
}
$('.task').change(function() {
checkTotal(this);//passed only the checkbox clicked
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="row-0">
<div class="options">
<h2>Row 0</h2>
<button class="toggle">Toggle</button>
</div>
<ul class="task-list" data="abd">
<li><input type="checkbox" id="task-0-0" class="task" value="0" /> <label for="task-0-0"> Item 0</label></li>
<li><input type="checkbox" id="task-0-1" class="task" value="1" /> <label for="task-0-1"> Item 1</label></li>
<li><input type="checkbox" id="task-0-2" class="task" value="2" /> <label for="task-0-2"> Item 2</label></li>
</ul>
</div>
<div class="row" id="row-1">
<div class="options">
<h2>Row 1</h2>
<button class="toggle">Toggle</button>
</div>
<ul class="task-list">
<li><input type="checkbox" id="task-1-0" class="task" value="0" /> <label for="task-1-0"> Item 0</label></li>
<li><input type="checkbox" id="task-1-1" class="task" value="1" /> <label for="task-1-1"> Item 1</label></li>
<li><input type="checkbox" id="task-1-2" class="task" value="2" /> <label for="task-1-2"> Item 2</label></li>
</ul>
</div>

The first radio button is unchecked while selecting the second one

I have checkboxes and radio buttons on my page.
I have some scenario.
When the user selects the first checkbox then the first radio will select and if you unchecked the checkbox then the radio button will unchecked.
If the user directly selects the radio button then the nearest checkbox will select.
The above scenarios are almost working, I am getting the issue on the second checkbox.
I select the first checkbox then the first radio button is selected. If I select the second check then the radio button is selecting but the first radio is unchecked.
$("input[type='radio']").click(function() {
$(this).closest('.reviewers-details').find('.selectRV').prop('checked', true);
});
$("input[type='checkbox']").click(function() {
var checkbox = $(this).closest('.reviewers-details').find('.selectRV').prop('checked');
if (checkbox == true) {
// $(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', true);
$(this).closest('.reviewers-details').find('input[type=radio]:first').prop('checked', true);
} else if ($(this).prop("checked") == false) {
$(this).closest('.reviewers-details').find('input[type=radio]').prop('checked', false);
}
});
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">test
<ul>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">
<label>abc</label>:
</li>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox" name="reviewerid[1]" class="revieweruser selectRV" value="1">demo
<ul>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="1">
<label>abc</label>:
</li>
<li>
<input type="radio" name="reviewer_timeslot[1]" class="revieweruser" value="3">
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
All radio buttons with the same value for their name attribute will be part of the same radio group: if one becomes selected, the others automatically become unselected.
Below, I simply renamed the radio buttons in your second group to isolate them (and their linked checkbox) from the first group.
(You may want to rename the checkbox as well, unless you have a reason for it to share a name with the first checkbox.)
$("input[type='radio']").click(function() {
$(this)
.closest('.reviewers-details')
.find('.selectRV')
.prop('checked', true);
});
$("input[type='checkbox']").click(function() {
var checkbox = $(this)
.closest('.reviewers-details')
.find('.selectRV')
.prop('checked');
if (checkbox == true) {
$(this)
.closest('.reviewers-details')
.find('input[type=radio]:first')
.prop('checked', true);
}
else if ($(this).prop("checked") == false) {
$(this)
.closest('.reviewers-details')
.find('input[type=radio]')
.prop('checked', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox"
name="reviewerid[1]"
class="revieweruser selectRV"
value="1"
/>test
<ul>
<li>
<input type="radio"
name="reviewer_timeslot[1]"
class="revieweruser"
value="1"
/>
<label>abc</label>:
</li>
<li>
<input type="radio"
name="reviewer_timeslot[1]"
class="revieweruser"
value="3"
/>
<label>xyz</label>:
</li>
</ul>
</div>
</div>
<div class="reviewers-details d-table sectionHeading">
<div class="d-table-cell">
<input type="checkbox"
name="reviewerid[1]"
class="revieweruser selectRV"
value="1"
/>demo
<ul>
<li>
<input type="radio"
name="reviewer_timeslot[2]"
class="revieweruser"
value="1"
/>
<label>abc</label>:
</li>
<li>
<input type="radio"
name="reviewer_timeslot[2]"
class="revieweruser"
value="3"
/>
<label>xyz</label>:
</li>
</ul>
</div>
</div>

How can i access my parent li element using javascript?

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>

jQuery: Add class if list item has checked radio button inside

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>

Jquery - Enable/disable multiple checkboxes in multiple lists

I have three lists in my page (ul.list1, ul.list2, ul.list3) and each li of every list has checkboxes. From the beginning I want to have all checkboxes disabled except from the ones in .list1.
The thought is that I have to select THREE .list1-checkboxes, then only ONE in .list2 and then AUTOCHECK the .list3-checkbox.
To be more specific if I click three .list1-checkboxes I want to disable the rest of the .list1-checkboxes and enable .list2-checkboxes. But if I uncheck one of the .list1-checkboxes I want to enable the rest .list1-checkboxes again and disable .list2-checkboxes whether I had already clicked on them or not.
Now if I select one .list2-checkbox I want the rest of the .list2-checkboxes to be disabled and in .list3 enable and autocheck the only one checkbox there is. If I uncheck the .list2-checkbox I want the the .list2-checkboxes to be enabled again and .list3-checkbox to be unchecked and disabled.
The HTML is something like that:
<div>
<ul class="list1">
<li><input type="checkbox" /><label>list1-item1</label></li>
<li><input type="checkbox" /><label>list1-item2</label></li>
<li><input type="checkbox" /><label>list1-item3</label></li>
<li><input type="checkbox" /><label>list1-item4</label></li>
<li><input type="checkbox" /><label>list1-item5</label></li>
</ul>
</div>
<div>
<ul class="list2">
<li><input type="checkbox" /><label>list2-item1</label></li>
<li><input type="checkbox" /><label>list2-item2</label></li>
<li><input type="checkbox" /><label>list2-item3</label></li>
<li><input type="checkbox" /><label>list2-item4</label></li>
<li><input type="checkbox" /><label>list2-item5</label></li>
<li><input type="checkbox" /><label>list2-item6</label></li>
<li><input type="checkbox" /><label>list2-item7</label></li>
<li><input type="checkbox" /><label>list2-item8</label></li>
</ul>
<div>
</div>
<ul class="list3">
<li><input type="checkbox" /><label>list3-item1</label></li>
</ul>
</div>
Your requirements can be acheived through event handlers. You can find a list of events in this page : HTML DOM Events. And if you want to use jQuery to attach event handlers, you can read on() | jQuery API.
// Code goes here
$(function() {
var list1 = $('.list1 > li > input[type="checkbox"]');
var list2 = $('.list2 > li > input[type="checkbox"]');
var list3 = $('.list3 > li > input[type="checkbox"]');
list1.on('change', function(event) {
var numList1 = $(list1).filter(':checked').length;
if(numList1 >= 3) {
$(list1).filter(':not(:checked)').prop('disabled', true);
$(list2).prop('disabled', false);
} else {
$(list1).prop('disabled', false);
$(list2).prop('checked', false).prop('disabled', true);
$(list3).prop('checked', false).prop('disabled', true);
}
});
list2.on('change', function(event) {
var numList2 = $(list2).filter(':checked').length;
if(numList2 >=1) {
$(list2).filter(':not(:checked)').prop('disabled', true);
$(list3).prop('checked', true).prop('disabled', false);
}
else {
$(list2).prop('disabled', false);
$(list3).prop('checked', false).prop('disabled', true);
}
});
});
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<ul class="list1">
<li>
<input type="checkbox" />
<label>list1-item1</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item2</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item3</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item4</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item5</label>
</li>
</ul>
</div>
<div>
<ul class="list2">
<li>
<input type="checkbox" disabled/>
<label>list2-item1</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item2</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item3</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item4</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item5</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item6</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item7</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item8</label>
</li>
</ul>
<div></div>
<ul class="list3">
<li>
<input type="checkbox" disabled/>
<label>list3-item1</label>
</li>
</ul>
</div>
</body>
</html>

Categories