parent child checkbox selection

parent child checkbox selection - javascript

<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="childChecked(this, this.form.elements['prnt'])">
above code creates dynamic child checkboxes for each row by fetching data from database
<input type="checkbox" name="all[]" id="<?php echo $record_id;?>" value="<?php echo $record_id; ?>" onclick="allChecked(this, this.form.elements['prnt'])">
and above is the parent checkbox
javascript code:
function checkAll(){
var main_check=document.getElementById("check");
var all_check=document.getElementsByName('all[]');
if(main_check.checked){
for(var i=0;i<all_check.length;i++){
all_check[i].checked=true;
}
}else{
for(var i=0;i<all_check.length;i++){
all_check[i].checked=false;
}
}
}
function childChecked(child, prnt){
if (!child.length){ // if not an array
prnt.checked = child.checked;
//alert(prnt.checked);
return;
}
for (var i=0; i<child.length; i++){
if (!child[i].checked)
return;
}
prnt.checked = true;
}
above is my code for parent child checkbox selection
it does:
1. checks/unchecks child checkboxes on checking/unchecking parent checkbox
2. unchecks parent checkbox if one of the child checkbox is unchecked
and now my problem is, it checks parent checkbox if we checked a single child checkbox but i want parent checkbox to be checked if and only if all child checkboxes are checked

Your code a can be simplified:
var main_check = document.getElementById("check");
var all_check = document.getElementsByName('all[]');
main_check.onchange = checkAll;
for (var i = 0; i < all_check.length; i++) {
all_check[i].onchange = childChanged;
}
function checkAll() {
for (var i = 0; i < all_check.length; i++) {
all_check[i].checked = main_check.checked;
}
}
function childChanged() {
if (!this.checked) {
main_check.checked = false;
return;
}
// Check if main checkbox should be checked
for (var i = 0; i < all_check.length; i++) {
if (!all_check[i].checked) return;
}
main_check.checked = true;
}
and HTML:
<input type="checkbox" id="check" /> Main
<ul>
<li><input type="checkbox" name="all[]" /></li>
<li><input type="checkbox" name="all[]" /></li>
<li><input type="checkbox" name="all[]" /></li>
<li><input type="checkbox" name="all[]" /></li>
</ul>
I also got rid of inline event handlers.
Demo: http://jsfiddle.net/TXRNF/

Related

Unselect the select all checkbox when one of the other checkboxes is unselected

I iterate through an array to create some checkboxes, like below:
<div class="funnels">
<label class="checkbox-inline">
<input type="checkbox" id="selectall"> onClick="selectAll(this)" />All funnels
</label>
<?php foreach ($funnels as $funnel) { ?>
<label class="checkbox-inline">
<input type="checkbox" name="funnel[]" id ="funnel" value="<?php echo $funnel ?>" ><?php echo $funnel ?>
</label>
<?php } ?>
</div>
I use the following javascript to select all checkboxes when the All checkbox has been clicked. What I need to do is to unselect the all checkbox once one of the other checkboxes has been unchecked.
Any help would be appreciated.
function selectAll(source) {
checkboxes = document.getElementsByName('funnel[]');
for(i=0;i<checkboxes.length;i++)
checkboxes[i].checked = source.checked;
}

The id should be unique; so consider using class instead of id.
function selectAll(source) {
checkboxes = document.querySelector('funnel[]');
for(i=0;i<checkboxes.length;i++)
checkboxes[i].checked = source.checked;
}
function selectAll(source) {
var checkboxes = document.querySelectorAll('.funnel');
for(i=0;i<checkboxes.length;i++)
checkboxes[i].checked = source.checked;
}
function unSelect(element) {
if(!element.checked){
// uncheck "select all" when 1,2 or 3 is unchecked
document.querySelector('#selectall').checked = false;
// if you want to unselect also the others checkboxes of the class "funnel",uncomment the following block
/*var others = document.querySelectorAll('.funnel');
for(i=0;i<others.length;i++)
others[i].checked = false;*/
}else{
// check "select all" when 1, 2, 3 is checked
document.querySelector('#selectall').checked = true;
}
}
<input type="checkbox" onclick="selectAll(this)" id="selectall"/> all select <br>
<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 1 <br>
<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 2 <br>
<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 3 <br>

You would need to bind change event handler to other checkbox element's also.
I would also recommend you to use unobtrusive event handlers see addEventListener()
document.addEventListener("DOMContentLoaded", function(event) {
var checkboxes = document.getElementsByName('funnel[]'),
selectall = document.getElementById('selectall');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function() {
//Conver to array
var inputList = Array.prototype.slice.call(checkboxes);
//Set checked property of selectall input
selectall.checked = inputList.every(function(c) {
return c.checked;
});
});
}
selectall.addEventListener('change', function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = selectall.checked;
}
});
});
<label> <input type="checkbox" id="selectall" />All funnels</label>
<br><label> <input type="checkbox" name="funnel[]" value="1">1</label>
<br><label> <input type="checkbox" name="funnel[]" value="2">2</label>
<br><label> <input type="checkbox" name="funnel[]" value="2">3</label>
Refrences
DOMContentLoaded
Array.every()

Disable checkbox after reaching a limit

I'm looking for a native JavaScript Solution that will prevent the user checking more than 2 items by disabling the remaining checkboxes (and enabling them again if the user unchecks one of their options)
Below are the checkboxes I have in place:
<div class="checkboxdiv">
<input type="hidden" name="Extras" value="">
<input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/>
<input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/>
<input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/>
<input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/>
<input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label>
</div>
I am aware this has been covered using JQuery, but I'm looking for a native solution so I can better understand how the code works.
Solution
This is the final solution I have come up with, through everyone's help.
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup;
var limit=limit;
//Changes onclick funtion for each checkbox
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick= function(){
var checkedcount=0;
//Loops through checkboxes
for (var i=0; i<checkgroup.length; i++){
//adds 1 if checked, 0 if not
checkedcount+=(checkgroup[i].checked)? 1 : 0;
}
//Loops through checkboxes
for (var i=0; i<checkgroup.length; i++){
//Disables check box if it's unchecked and the limit has been reached
if(!checkgroup[i].checked && checkedcount==limit){
checkgroup[i].disabled=true;
}
//Enables all checkboxes otherwise
else{
checkgroup[i].disabled=false;
}
}
}
}
}

Check out the CSS pseudo class ":checked" and document.querySelectorAll.
Here is a fiddle to start from:
var currentlyCheckedCount = 0
function disableRemainingCheckboxes() {
Array.from(document.querySelectorAll('input[type="checkbox"]:not(:checked)')).forEach(function(element) {
element.disabled = 'disabled'
})
}
function enableAllCheckboxes() {
Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(element) {
element.disabled = undefined
})
}
Array.from(document.querySelectorAll("input[type='checkbox']")).forEach(function(checkbox) {
checkbox.addEventListener('change', onCheckboxClick)
})
function onCheckboxClick() {
if(this.checked) {
currentlyCheckedCount++
} else {
currentlyCheckedCount--
}
if(currentlyCheckedCount == 2) {
disableRemainingCheckboxes()
} else {
enableAllCheckboxes()
}
}

Geekonaut answer/code is great, but, if you care about IE support (Array.from() doesn't work in it), here is simplified, more straight-forward version:
limit = 0; //set limit
checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes
function checker(elem) {
if (elem.checked) { //if checked, increment counter
limit++;
} else {
limit--; //else, decrement counter
}
for (i = 0; i < checkboxes.length; i++) { // loop through all
if (limit == 2) {
if (!checkboxes[i].checked) {
checkboxes[i].disabled = true; // and disable unchecked checkboxes
}
} else { //if limit is less than two
if (!checkboxes[i].checked) {
checkboxes[i].disabled = false; // enable unchecked checkboxes
}
}
}
}
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() { //call function on click and send current element as param
checker(this);
}
}
<div class="checkboxdiv">
<input type="hidden" name="Extras" value="">
<input type="checkbox" name="Extras" value="Wedges"><label>Wedges</label> <br/>
<input type="checkbox" name="Extras" value="Chips"><label>Chips</label> <br/>
<input type="checkbox" name="Extras" value="Garlic Bread"><label>Garlic Bread</label> <br/>
<input type="checkbox" name="Extras" value="Chicken Wings"><label>Chicken Wings</label> <br/>
<input type="checkbox" name="Extras" value="Cheese Sticks"><label>Cheese Sticks</label>
</div>
Code is very clear (easy to understand), i hope, and there are comments, too.

How to check parent when all children checkboxes are checked

I have a rather different HTML structure to other questions similar to this on SO. I want to make the parent checkbox checked when all children checkboxes are checked. I have a JSFiddle where I have added my rather long HTML code. What am I doing wrong in the Jquery? This is my jquery:
$('li :checkbox').on('click', function() {
var $chk = $(this),
$container = $chk.closest('td,li');
if (!$container.hasClass('list-group-item')) {
$container.find(':checkbox').not(this).prop('checked', this.checked)
}
do{
$ul = $container.parent();
$parent = $ul.siblings(':checkbox');
if($chk.is(':checked')){
$parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
} else {
$parent.prop('checked', false)
}
$chk = $parent;
$container = $chk.closest('td,li');
} while($ul.is(':not(.someclass)'));
});
PS: The parent/child relationship in the bottom half of the HTML structure don't work well coz of some unclosed tags. But the first few parent/children are working

The example below should help you understand and give you a way to accomplish what you want.
Explanation
What you should do is give each sub-category an ID which can be used to iterate through the children so the only those checkboxes can be checked and not all of them.
HTML
<ul>
<li>
<input type="checkbox" id="test-main"> test
</li>
<ul id="test-sub-items">
<li>
<input type="checkbox"> test
</li>
<li>
<input type="checkbox"> Something
</li>
<li>
<input type="checkbox"> Another Thing</li>
</ul>
<li>
<input type="checkbox"> Blah
</li>
<li>
<input type="checkbox"> blah
</li>
</ul>
JavaScript
var parent = document.getElementById('test-sub-items'),
parentCheckbox = document.getElementById('test-main');
parentCheckbox.addEventListener('click', function () {
for (var i = 0; i < parent.children.length; i++) {
if (parentCheckbox.checked == true)
parent.children[i].firstElementChild.checked = true;
else
parent.children[i].firstElementChild.checked = false;
}
});
This is simply an example for you to try and incorporate in to your code.
Update
After reading your comment I quickly came up with this function which should help:
function areAllChecked()
{
for (var i = 0; i < parent.children.length; i++) {
if (parentCheckbox.checked == false)
return false;
}
return true;
}
Check the console in the live example for the updated version.
Live Example
JSFiddle
JSFiddle (Update 1)
Reading Material
children
firstElementChild

Because i did not find a way any where else i tried with trial and error on the example of #Script47
And got it to work with that:
var child = document.getElementById('test-sub-items'), parentCheckbox = document.getElementById('test-main');
child.addEventListener('click', function() {
for (var i = 0; i < child.children.length; i++) {
if (child.children[i].firstElementChild.checked == true)
parentCheckbox.checked = true;
else
parentCheckbox.checked = false;
}
});
<ul>
<li>
<input type="checkbox" id="test-main"> Essen
</li>
<ul id="test-sub-items">
<li><input type="checkbox"> Apfel</li>
<li><input type="checkbox"> Birne </li>
<li><input type="checkbox"> Cadmium</li>
</ul>
<li><input type="checkbox">Bier</li>
<li><input type="checkbox">C hohes</li>
</ul>

Checkbox bind/unbind logic

Hi i have a situation where the binding for a table containing checkbox is done at the header checkbox
i.e when u select the header check all table rows get selected .
but due to this the problem comes when i unselect an row from the table the header chekcbox should get unselected which is not happening
and suppose i uncheck the header checkbox entire table row will be unchecked coz of the binding issue
please suggest some logic to solve it
I tried retrieving the table row checkbox value and again rendering it but it's a memory constraint.
Thanks in advance

HTML
<input type="checkbox" id="header" />
<li>
<input type="checkbox" class="sub" />
</li>
<li>
<input type="checkbox" class="sub" />
</li>
<li>
<input type="checkbox" class="sub" />
</li>
JS
var headCheckbox = document.getElementById('header');
var subCheckbox = document.getElementsByClassName('sub');
headCheckbox.addEventListener('change', function (e) {
for (var i = 0; i < subCheckbox.length; i++) {
subCheckbox[i].checked = (this.checked ? true : false);
}
});
for (var i = 0; i < subCheckbox.length; i++) {
subCheckbox[i].addEventListener('change', function (e) {
if (!this.checked) {
headCheckbox.checked = false;
} else {
var checked = 0;
for (var i = 0; i < subCheckbox.length; i++) {
if (subCheckbox[i].checked) checked++;
}
if (checked == subCheckbox.length) headCheckbox.checked = true;
}
});
}
DEMO

You may do like below to
1. Select all checkbox on selecting header checkbox.
2. UnSelect header checkbox on unselecting any child checkbox.
3. Select header checkbox on selecting all child checkbox.
JavaScript :
function selectAll(source)
{
var checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
function selectChk(src)
{
var isAllChecked = true;
var headerChk = document.getElementsByName('headerChk');
if(!src.checked){
headerChk[0].checked = false;
}
else{
var checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
if(!checkboxes[i].checked)
isAllChecked = false;
}
if(isAllChecked)
headerChk[0].checked = true;
}
}
HTML :
<input type="checkbox" onClick="selectAll(this)" name="headerChk" /> Select All<br/>
<input type="checkbox" name="foo" value="bar1" onClick="selectChk(this)"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2" onClick="selectChk(this)"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3" onClick="selectChk(this)"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4" onClick="selectChk(this)"> Bar 4<br/>

How to implement "select all" check box in HTML?

I have an HTML page with multiple checkboxes.
I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?

<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var checkbox in checkboxes)
checkbox.checked = source.checked;
}
</script>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
UPDATE:
The for each...in construct doesn't seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

Using jQuery:
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />
<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

I'm not sure anyone hasn't answered in this way (using jQuery):
$( '#container .toggle-button' ).click( function () {
$( '#container input[type="checkbox"]' ).prop('checked', this.checked)
})
It's clean, has no loops or if/else clauses and works as a charm.

I'm surprised no one mentioned document.querySelectorAll(). Pure JavaScript solution, works in IE9+.
function toggle(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
<input type="checkbox" onclick="toggle(this);" />Check all?<br />
<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

here's a different way less code
$(function () {
$('#select-all').click(function (event) {
var selected = this.checked;
// Iterate each checkbox
$(':checkbox').each(function () { this.checked = selected; });
});
});

Demo http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>

When you call document.getElementsByName("name"), you will get a Object. Use .item(index) to traverse all items of a Object
HTML:
<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">
<input type="checkbox" name="rfile" value="/cgi-bin/">
<input type="checkbox" name="rfile" value="/includes/">
<input type="checkbox" name="rfile" value="/misc/">
<input type="checkbox" name="rfile" value="/modules/">
<input type="checkbox" name="rfile" value="/profiles/">
<input type="checkbox" name="rfile" value="/scripts/">
<input type="checkbox" name="rfile" value="/sites/">
<input type="checkbox" name="rfile" value="/stats/">
<input type="checkbox" name="rfile" value="/themes/">

Slightly changed version which checks and unchecks respectfully
$('#select-all').click(function(event) {
var $that = $(this);
$(':checkbox').each(function() {
this.checked = $that.is(':checked');
});
});

My simple solution allows to selectively select/deselect all checkboxes in a given portion of the form, while using different names for each checkbox, so that they can be easily recognized after the form is POSTed.
Javascript:
function setAllCheckboxes(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++) {
if (inputElements[i].type != 'checkbox')
continue;
inputElements[i].checked = sourceCheckbox.checked;
}
}
HTML example:
<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
<p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
<p><input type="checkbox" name="colin" />Firth, Colin</p>
<p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>
I hope you like it!

<html>
<head>
<script type="text/javascript">
function do_this(){
var checkboxes = document.getElementsByName('approve[]');
var button = document.getElementById('toggle');
if(button.value == 'select'){
for (var i in checkboxes){
checkboxes[i].checked = 'FALSE';
}
button.value = 'deselect'
}else{
for (var i in checkboxes){
checkboxes[i].checked = '';
}
button.value = 'select';
}
}
</script>
</head>
<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />
<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>
</html>

Try this simple JQuery:
$('#select-all').click(function(event) {
if (this.checked) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});

JavaScript is your best bet. The link below gives an example using buttons to de/select all. You could try to adapt it to use a check box, just use you 'select all' check box' onClick attribute.
Javascript Function to Check or Uncheck all Checkboxes
This page has a simpler example
http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

This sample works with native JavaScript where the checkbox variable name varies, i.e. not all "foo."
<!DOCTYPE html>
<html>
<body>
<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
var node_list = document.getElementsByTagName('input');
var checkboxes = [];
for (var i = 0; i < node_list.length; i++)
{
var node = node_list[i];
if (node.getAttribute('type') == 'checkbox')
{
checkboxes.push(node);
}
}
return checkboxes;
}
function toggle(source) {
checkboxes = getcheckboxes();
for (var i = 0 n = checkboxes.length; i < n; i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
</body>
</html>

It's rather simple:
const selectAllCheckboxes = () => {
const checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach((cb) => { cb.checked = true; });
}

If adopting the top answer for jQuery, remember that the object passed to the click function is an EventHandler, not the original checkbox object. Therefore code should be modified as follows.
HTML
<input type="checkbox" name="selectThemAll"/> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
Javascript
$(function() {
jQuery("[name=selectThemAll]").click(function(source) {
checkboxes = jQuery("[name=foo]");
for(var i in checkboxes){
checkboxes[i].checked = source.target.checked;
}
});
})

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
<asp:ListItem Value="Item 5">Item 5</asp:ListItem>
<asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>
<script type="text/javascript">
function checkAll(obj1) {
var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');
for (var i = 0; i < checkboxCollection.length; i++) {
if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
checkboxCollection[i].checked = obj1.checked;
}
}
}
</script>

that should do the job done:
$(':checkbox').each(function() {
this.checked = true;
});

You may have different sets of checkboxes on the same form. Here is a solution that selects/unselects checkboxes by class name, using vanilla javascript function document.getElementsByClassName
The Select All button
<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All
Some of the checkboxes to select
<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />
The javascript
function selectAll() {
var blnChecked = document.getElementById("select_all_invoices").checked;
var check_invoices = document.getElementsByClassName("check_invoice");
var intLength = check_invoices.length;
for(var i = 0; i < intLength; i++) {
var check_invoice = check_invoices[i];
check_invoice.checked = blnChecked;
}
}

This is what this will do, for instance if you have 5 checkboxes, and you click check all,it check all, now if you uncheck all the checkbox probably by clicking each 5 checkboxs, by the time you uncheck the last checkbox, the select all checkbox also gets unchecked
$("#select-all").change(function(){
$(".allcheckbox").prop("checked", $(this).prop("checked"))
})
$(".allcheckbox").change(function(){
if($(this).prop("checked") == false){
$("#select-all").prop("checked", false)
}
if($(".allcheckbox:checked").length == $(".allcheckbox").length){
$("#select-all").prop("checked", true)
}
})

As I cannot comment, here as answer:
I would write Can Berk Güder's solution in a more general way,
so you may reuse the function for other checkboxes
<script language="JavaScript">
function toggleCheckboxes(source, cbName) {
checkboxes = document.getElementsByName(cbName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

$(document).ready(function() {
$(document).on(' change', 'input[name="check_all"]', function() {
$('.cb').prop("checked", this.checked);
});
});

Using jQuery and knockout:
With this binding main checkbox stays in sync with underliying checkboxes, it will be unchecked unless all checkboxes checked.
ko.bindingHandlers.allChecked = {
init: function (element, valueAccessor) {
var selector = valueAccessor();
function getChecked () {
element.checked = $(selector).toArray().every(function (checkbox) {
return checkbox.checked;
});
}
function setChecked (value) {
$(selector).toArray().forEach(function (checkbox) {
if (checkbox.checked !== value) {
checkbox.click();
}
});
}
ko.utils.registerEventHandler(element, 'click', function (event) {
setChecked(event.target.checked);
});
$(window.document).on('change', selector, getChecked);
ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
$(window.document).off('change', selector, getChecked);
});
getChecked();
}
};
in html:
<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

to make it in short-hand version by using jQuery
The select all checkbox
<input type="checkbox" id="chkSelectAll">
The children checkbox
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
jQuery
$("#chkSelectAll").on('click', function(){
this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);
})

Below methods are very Easy to understand and you can implement existing forms in minutes
With Jquery,
$(document).ready(function() {
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
});
in HTML form put below buttons
<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a>
With just using javascript,
<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
in HTML form put below buttons
<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>
<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

Here is a backbone.js implementation:
events: {
"click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {
var checkboxes = document.getElementsByName('options');
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = event.currentTarget.checked;
}
},

html
<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3
javascript
$(':checkbox.all').change(function(){
$(':checkbox.item').prop('checked', this.checked);
});

1: Add the onchange event Handler
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>
2: Modify the code to handle checked/unchecked
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}

You can Use This code.
var checkbox = document.getElementById("dlCheckAll4Delete");
checkbox.addEventListener("click", function (event) {
let checkboxes = document.querySelectorAll(".dlMultiDelete");
checkboxes.forEach(function (ele) {
ele.checked = !!checkbox.checked;
});
});

You can use this simple code
$('.checkall').click(function(){
var checked = $(this).prop('checked');
$('.checkme').prop('checked', checked);
});

Maybe a bit late, but when dealing with a check all checkbox, I believe you should also handle the scenario for when you have the check all checkbox checked, and then unchecking one of the checkboxes below.
In that case it should automatically uncheck the check all checkbox.
Also when manually checking all the checkboxes, you should end up with the check all checkbox being automatically checked.
You need two event handlers, one for the check all box, and one for when clicking any of the single boxes below.
// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
var selectAllChecked = $("#chk-clients-all").prop("checked");
// IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
if (selectAllChecked && $(this).prop("checked") == false) {
$("#chk-clients-all").prop("checked", false);
} else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
var allChecked = true;
$(".client").each(function () {
allChecked = $(this).prop("checked");
if (!allChecked) {
return false;
}
});
$("#chk-clients-all").prop("checked", allChecked);
}
}
// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
$(".client").prop("checked", $(this).prop("checked"));
}

We Keep Coding

JavaScript is the programming language of the Web.

parent child checkbox selection - javascript

Related

Unselect the select all checkbox when one of the other checkboxes is unselected

Disable checkbox after reaching a limit

How to check parent when all children checkboxes are checked

Checkbox bind/unbind logic

How to implement "select all" check box in HTML?

Categories

Resources