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>
Related
I have textarea field and 3 groups of checkboxes. User can individually select any checkbox and checkbox value will be added to textarea field. But how to include "Select all" functionality to select all checkboxes in group? I created "Select all" function, but after selection values are not added to textarea field.
// Add checkbox value to text field
$checks = $("ul li :checkbox");
$checks.on("change", function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$("#results").val( "checked:" + string);
});
// Select all checkboxes in the group
jQuery(function($){
$('#allg1').click(function () { $('.group1 li input').not(this).prop('checked', this.checked);});
$('#allg2').click(function () { $('.group2 li input').not(this).prop('checked', this.checked);});
$('#allg3').click(function () { $('.group3 li input').not(this).prop('checked', this.checked);});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="results" rows="2" cols="60"> </textarea>
<ul class="group1">
<input type="checkbox" id="allg1" name="allg1"><label for="allg1">Select all from group G1</label>
<li><input type="checkbox" value="G101"></li>
<li><input type="checkbox" value="G102"></li>
<li><input type="checkbox" value="G103"></li>
</ul>
<ul class="group2">
<input type="checkbox" id="allg2" name="allg2"><label for="allg2">Select all from group G2</label>
<li><input type="checkbox" value="G201"></li>
<li><input type="checkbox" value="G202"></li>
<li><input type="checkbox" value="G203"></li>
</ul>
<ul class="group3">
<input type="checkbox" id="allg3" name="allg3"><label for="allg3">Select all from group G3</label>
<li><input type="checkbox" value="G301"></li>
<li><input type="checkbox" value="G302"></li>
<li><input type="checkbox" value="G303"></li>
</ul>
To achieve this you can trigger() the change event manually on the checkboxes when the 'Select all' is toggled. Your normal event handler will then run which updates the text in the textbox.
Also note that you can DRY up the JS controlling the 'Select all' boxes by using common class attributes on them.
jQuery($ => {
// Add checkbox value to text field
let $checks = $("ul li :checkbox").on("change", function() {
let string = $checks.filter(":checked").map((i, el) => el.value).get().join(",");
$("#results").val(string && "checked:" + string);
});
// Select all checkboxes in the group
$('.all').click(e => {
$(e.target).closest('.group').find('li input').not(e.target).prop('checked', e.target.checked).trigger('change');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="results" rows="2" cols="60"> </textarea>
<ul class="group">
<label><input type="checkbox" class="all" name="allg1">Select all from group G1</label>
<li><input type="checkbox" value="G101"></li>
<li><input type="checkbox" value="G102"></li>
<li><input type="checkbox" value="G103"></li>
</ul>
<ul class="group">
<label><input type="checkbox" class="all" name="allg2">Select all from group G2</label>
<li><input type="checkbox" value="G201"></li>
<li><input type="checkbox" value="G202"></li>
<li><input type="checkbox" value="G203"></li>
</ul>
<ul class="group">
<label><input type="checkbox" class="all" name="allg3">Select all from group G3</label>
<li><input type="checkbox" value="G301"></li>
<li><input type="checkbox" value="G302"></li>
<li><input type="checkbox" value="G303"></li>
</ul>
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
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>
I need a jQuery function which iterates nested ul li components and find out the numbers which is defined in .ch class with checkboxes are checked and only those will be push in array.
<ul>
<li><input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
<li><input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
<li><input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users & Roles <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
<li><input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
Full code
HTML
<ul class="tree" id="tree">
<li><input type="checkbox" name="account_settings" value="yes"><span class="ch">111</span>Account Settings <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
<li><input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
<li><input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users & Roles <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
<li><input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="rl_module" value="yes"><span class="ch">199</span>RL Module</li>
<li><input type="checkbox" name="rl_module" value="yes"><span class="ch">154</span>Accounting
<ul>
<li><input type="checkbox" name="vat" value="yes"><span class="ch">122</span>VAT</li>
<li><input type="checkbox" name="bank_account" value="yes"><span class="ch">233</span>Banking
<ul>
<li><input type="checkbox" name="view" value="yes"><span class="ch">23</span>View</li>
<li><input type="checkbox" name="crud" value="yes"><span class="ch">12</span>CRUD</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$('input[type=checkbox]').click(function(){
if(this.checked){
$(this).parents('li').children('input[type=checkbox]').prop('checked',true);
}
$(this).parent().find('input[type=checkbox]').prop('checked',this.checked);
});
var phrases = [];
$('.tree').each(function(){
var phrase = '';
$(this).find('li').each(function(){
var current = $(this);
if(current.children().size() > 0) {return true;}
phrase += $(this).text();
});
phrases.push(phrase);
});
// note the comma to separate multiple phrases
alert(phrases);
CSS
.ch {display:none}
JSFiddle link here
Demo: https://jsfiddle.net/qof1dxn7/
HTML:
<ul>
<li>
<input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
<li>
<input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users & Roles
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
<li>
<input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
JS
$(function() {
$('input:checkbox').change(function() {
var arr = [];
$('input:checked').each(function () {
arr.push( parseInt($(this).next('.ch').text()) );
});
console.log(arr);
});
});
$('input').on('change', function () {
var numbers = '';
$('input:checked').each(function () {
numbers += $(this).next('.ch').text() + ', ';
});
alert(numbers);
});
jsFiddle: http://jsfiddle.net/Z82FR/34/
I am trying to get some jquery to check the child checkbox when the parent is selected, however it is not happening and I can't for the life of me figure out what the deal is.
Code:
$('#check-all-parent').click(function(event) {
if(this.checked) { // check select status
$('#check-all-child').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('#check-all-child').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
HTML:
<input type="checkbox" id="check-all-parent">hello
<br />
<input type="checkbox" id="check-all-child">hello2
Here is the jsfidle
Use class instead of id.
HTML
<input type="checkbox" id="check-all-parent">hello
<br />
<input type="checkbox" class="check-all-child">hello2
jQuery
$('#check-all-parent').click(function(event) {
if(this.checked) { // check select status
$('.check-all-child').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.check-all-child').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
Your code works, you just need to add jQuery in the jsfiddle. Click the first drop-down under Frameworks & Extensions, and choose a jQuery library (like this: jsfiddle.net/evx9y8g9/3).
Your JS could be a bit cleaner though:
$('#check-all-parent').click(function() {
$("#check-all-child").prop("checked", $(this).prop("checked"));
});
No need to use loop. Use class instead of id and in js:
$(".check-all-parent").on("click", function() {
$(".check-all-child").prop("checked", $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check-all-parent">hello
<br />
<input type="checkbox" class="check-all-child">hello2
<br />
<input type="checkbox" class="check-all-child">hello2
<br />
<input type="checkbox" class="check-all-child">hello2
<br />
<input type="checkbox" class="check-all-child">hello2
If you have parent an child checkboxes, consider using a nested list:
<ul id="checkboxes">
<li>
<input type="checkbox"> hello
<ul>
<li> <input type="checkbox"> hello1 </li>
<li> <input type="checkbox"> hello2 </li>
</ul>
</li>
</ul>
And then use
$('#checkboxes input[type="checkbox"]').on('change', function() {
$(this)
.nextAll('ul')
.find('input[type="checkbox"]')
.prop('checked', this.checked);
});
$('#checkboxes input[type="checkbox"]').on('change', function() {
$(this)
.nextAll('ul')
.find('input[type="checkbox"]')
.prop('checked', this.checked);
});
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="checkboxes">
<li>
<input type="checkbox">
hello
<ul>
<li>
<input type="checkbox">
hello1
<ul>
<li>
<input type="checkbox">
hello11
</li>
</ul>
</li>
<li>
<input type="checkbox">
hello2
</li>
<li>
<input type="checkbox">
hello3
</li>
</ul>
</li>
</ul>