I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).
I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
Could you tell me some simple approach how to get it work? Thanks a lot!
demo
updated_demo
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});
HTML:
<form>
<label>
<input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>
JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/
Thanks to #Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.
FIDDLE
HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
SCRIPT
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
And now add this to manage the master checkbox as well...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});
Add extra script according to your checkbox group:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
HTML Code:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>
use this i hope to help you i know that this is a late answer but if any one come here again
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
Master CheckBox:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
Child CheckBox:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="#employee.Id" />```
You can use jQuery like so:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
A fiddle.
var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
In HTML:
Master Check box <input type="checkbox" onClick="toggle(this);">
Other Check boxes <input type="checkbox" name="ALL">
You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});
I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.
Here is the basic idea
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
if there are other elements that are siblings, than you would beed to filter the siblings
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
jsFiddle
Related
In a specific DIV having .vipGuests that have multiple checkboxes (More than 12), I want to select maximum 12 checkboxes.
As soon as user select 12th checbox then remaining checkbox will get disabled.
My below mentioned code is only counting number of checkbox that are checked. How I can implement the functionality so that user can check maximum 12 checkbox and remaining will get disabled.
$('.vipGuests input[type=checkbox]').on('change', function () {
var totalGuest = 0;
$('.vipGuests input[type=checkbox]:checked').each(function () {
totalGuest++;
});
});
Note: The main thing is that each time during check/uncheck when counter of Checkboxes that are checked is 11 then all checkbox will be active. Only when counter is equals to 12 then the only unchecked checboxes will get disabled.
You can use :not() selector and select un-checked checkbox and disable them. Also you don't need to use .each() to get count of checkbox. Use length property instead.
$(".vipGuests :checkbox").on("change", function(){
if ($(".vipGuests :checkbox:checked").length >= 3)
$(".vipGuests :checkbox:not(:checked)").prop("disabled", true);
else
$(".vipGuests :checkbox:not(:checked)").prop("disabled", false);
});
$(".vipGuests :checkbox").on("change", function(){
$(".vipGuests :checkbox:not(:checked)").prop("disabled", $(".vipGuests :checkbox:checked").length >= 3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vipGuests">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
You can simply rely on length of jQuery object to check if 12 items are selected.
Use :not(:checked) selector for disabling non-checked inputs.
var $checkboxes = $('.vipGuests input[type=checkbox]');
$checkboxes.on('change', function() {
if ($checkboxes.filter(":checked").length >= 12) {
$checkboxes.filter(":not(:checked)").prop("disabled", true);
} else {
$checkboxes.prop("disabled", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vipGuests">
<input type="checkbox" checked/>1
<input type="checkbox" checked/>2
<input type="checkbox" checked/>3<br/>
<input type="checkbox" checked/>4
<input type="checkbox" checked/>5
<input type="checkbox" checked/>6<br/>
<input type="checkbox" checked/>7
<input type="checkbox" checked/>8
<input type="checkbox" checked/>9<br/>
<input type="checkbox" checked/>10
<input type="checkbox" checked/>11
<input type="checkbox" />12<br/>
<input type="checkbox" />13
<input type="checkbox" />14
<input type="checkbox" />15
</div>
You can use a global variable as below:
var totalGuest = 0;
$(".vipGuests :checkbox").on("change", function(){
this.checked?totalGuest++:totalGuest--;
$checkboxes.filter(":not(:checked)").prop("disabled", (totalGuest>=12)?true:false);
});
Hope this will help you.
JSFiddle Link
Code:
var totalGuest = 0;
$('div input[type=checkbox]').not(":radio,:submit").on('change', function () {
$(this).toggleClass("active");
if($(this).hasClass("active")) {
totalGuest ++;
}
else {
totalGuest --;
}
if(totalGuest >= 12) {
$('input[type=checkbox]').not(".active").attr("disabled","disabled");
}
else {
$('input[type=checkbox]').not(".active").removeAttr("disabled");
}
});
I am trying a check a checkbox (which checks all other checkboxes in the list and unchecks even if one among the list is unchecked. Now only the first I mean one checkbox checking all the remaining checkboxes in the list is happening but the vice versa I mean unchecking even if one among the list in unchecked is not working. How can i achieve that?
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>
Fiddle.
I would do it this way:
$('.selectall').on('change', function(e) {
var $inputs = $('#checkboxlist input[type=checkbox]');
if(e.originalEvent === undefined) {
var allChecked = true;
$inputs.each(function(){
allChecked = allChecked && this.checked;
});
this.checked = allChecked;
} else {
$inputs.prop('checked', this.checked);
}
});
$('#checkboxlist input[type=checkbox]').on('change', function(){
$('.selectall').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample"/>checkbox1</label><br/>
<label><input type="checkbox" name="sample"/>checkbox2</label><br />
<label><input type="checkbox" name="sample"/>checkbox3</label><br />
<label><input type="checkbox" name="sample"/>checkbox4</label><br />
</div>
EDIT: swapped e.isTrigger for e.originalEvent === undefined per A. Wolff's suggestion as commented below.
You can do it like below. Add another click event for checkbox under #checkboxlist, if a checkbox is unchecked then uncheck .selectall.
$('#checkboxlist input[type=checkbox]').click(function(){
if (!$(this).is(':checked')) {
$('.selectall').prop('checked', false);
}
});
DEMO
Check out this Demo.. with validation
<input type="checkbox" id="anchor-from"/>main
<input type="checkbox" class="checkall" id="period-daily" disabled />CheckBox2
<input type="checkbox" class="checkall" id="period-weekly"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly2"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly3"disabled />CheckBox3
<input type="checkbox" class="checkall" id="period-weekly4"disabled />CheckBox3
Js
$("#anchor-from").change(function(){
if($('#anchor-from').is(':checked'))
{
$(".checkall").attr("disabled", false);
$(".checkall").prop("checked", true);
}
else
{
$(".checkall").attr("disabled", true);
$(".checkall").prop("checked", false);
}
});
$(".checkall").change(function(){
if($('.checkall').not(':checked'))
{
$(".checkall").attr("disabled", true);
$(".checkall").prop("checked", false);
$("#anchor-from").prop("checked", false);
}
});
$(document).ready(function () {
$('input[name=sample]').click(function() {
if ($(this).hasClass('selectall')) {
if ($(this).prop('checked') == true) {
$('#checkboxlist input[name=sample]').prop('checked', true);
}
else {
$('#checkboxlist input[name=sample]').prop('checked', false);
}
}
else {
if ($('#checkboxlist input[name=sample]:checked').length == $('#checkboxlist input[name=sample]').length) {
$('.selectall').prop('checked', true)
}
else {
$('.selectall').prop('checked', false)
}
}
});
});
This question already has answers here:
How to select all checkboxes with jQuery?
(15 answers)
Closed 8 years ago.
I have multiple checkboxes , there is a checkbox with select all name, now i want that when some tick
the select all checkbox, then all the checkbox must be selected. I think this will be in jquery.
any tutorial link or codes with hints would be appreciated.the code snip is under...
<input type="checkbox" value="">Select All<br/>
<input type="checkbox" value="">A<br/>
<input type="checkbox" value="">B<br/>
<input type="checkbox" value="">C<br/>
<input type="checkbox" value="">D<br/>
<input type="checkbox" value="">E<br/>
<input type="checkbox" value="">F<br/>
<input type="checkbox" value="">G<br/>
<input type="checkbox" value="">H<br/>
This should check all checkboxes when you check the "Select All" one, and also uncheck all checkboxes when you uncheck it.
$("#selectAll").click(function () {
$(":checkbox").not(this).prop("checked", $(this).is(":checked"));
});
If you don't want the uncheck behavior:
$("#selectAll").click(function () {
if ($(this).is(":checked")) {
$(":checkbox").not(this).prop("checked", true);
}
});
But of course, you must identify it. Do it by adding the id="selectAll" attribute (or any other id you wish, just make sure you change the JavaScript code as well):
<input type="checkbox" value="" id="selectAll">Select All<br/>
<input type="checkbox" value="">A<br/>
<input type="checkbox" value="">B<br/>
<input type="checkbox" value="">C<br/>
<input type="checkbox" value="">D<br/>
<input type="checkbox" value="">E<br/>
<input type="checkbox" value="">F<br/>
<input type="checkbox" value="">G<br/>
<input type="checkbox" value="">H<br/>
<input type="checkbox" id="exp" />Tick All Checkbox<br/>
<input type="checkbox" value="demo1" class="subchkbox"/>No 1<br/>
<input type="checkbox" value="demo2" class="subchkbox"/>No 2<br/>
<input type="checkbox" value="demo3" class="subchkbox"/>No 3<br/>
<input type="checkbox" value="demo4" class="subchkbox"/>No 4<br/>
<input type="checkbox" value="demo5" class="subchkbox"/>No 5<br/>
<sctipt type="text/javascript">
/*Include the jquery library 1.9.1*/
$(document).ready(function() {
$('#exp').click(function(event) {
if(this.checked) {
$('.subchkbox').each(function() {
this.checked = true;
});
}else{
$('.subchkbox').each(function() {
this.checked = false;
});
}
});
});
[the fiddle is here][1]
Using jQuery :
$("input[type=checkbox]").prop({ checked : true })
JSFiddle
Using pure JavaScript :
var inputs = document.querySelectorAll('input[type=checkbox]')
Object.keys(inputs).forEach(function(i){
inputs[i].checked = true
})
JSFiddle
$("checkboxContainer").find("input[type='checkbox']").each(function() {
$(this).prop("checked", true);
});
I think using .find() is faster when selecting multiple elements.
If you want to do this in plain JS, it's also pretty simple.
You just have to loop through all of the inputs and set checked to true (or false), which isn't very efficient.
document.getElementById("all").addEventListener("change", function() {
if (this.checked) {
var boxes = document.getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].type === "checkbox") {
boxes[i].checked = true;
}
}
} else {
var boxes = document.getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].type === "checkbox") {
boxes[i].checked = false;
}
}
}
});
<input type="checkbox" value="" id="all">Select All
<br/>
<input type="checkbox" value="">A
<br/>
<input type="checkbox" value="">B
<br/>
<input type="checkbox" value="">C
<br/>
<input type="checkbox" value="">D
<br/>
<input type="checkbox" value="">E
<br/>
<input type="checkbox" value="">F
<br/>
<input type="checkbox" value="">G
<br/>
<input type="checkbox" value="">H
<br/>
Derived from the current answer marked as correct, it can all be much simpler:
$(document).ready(function()
{
$('#exp').click(function(event)
{
$('.subchkbox').prop({
checked: $(this).prop('checked')
});
});
});
I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.
Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO
You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle
Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo
Hello I've got a question about chechbox.
This code checked/unchecked all checkboxes if first one is checked/unchecked.
But I want to do something else with that. I want to add function that, if all of checkboxes are checked then the first one too, but when one or more of the checkboxes are unchecked then first one will be unchecked.
<input class="checkbox" onClick=Show("checkbox") type="checkbox" name="checkboxAll" value="all">
<input class="checkbox" type="checkbox" name="checkboxname1" value="1">
<input class="checkbox" type="checkbox" name="checkboxname2" value="2">
<input class="checkbox" type="checkbox" name="checkboxname3" value="3">
js code:
function Show( a ) {
if ( $("."+a).attr('checked') == true )
$("."+a).attr('checked', true);
else
$("."+a).attr('checked', false);
}
change your child element class names and call it in your show function. It will do the work for you. It is not working right now as expected as the class names are same for 1st one also as the others.
I have changed the names of you checkBoxes a bit, but from what I can understand in your question, this will work:
<input id="first" onClick="Show();" type="checkbox" name="checkboxAll" value="all">
<input class="checkbox" onClick="check();" type="checkbox" name="checkboxname1" value="1">
<input class="checkbox" onClick="check();" type="checkbox" name="checkboxname2" value="2">
<input class="checkbox" onClick="check();" type="checkbox" name="checkboxname3" value="3">
and the js:
function Show() {
if ($('#first').is(':checked')){
$(".checkbox").prop('checked', true);
}
else{
$(".checkbox").prop('checked', false);
}
}
function check(){
allChecked = true;
$(".checkbox").each(function(){
if (!$(this).is(':checked')){
allChecked = false;
}
});
if (allChecked){
$("#first").prop('checked', true);
}
else{
$("#first").prop('checked', false);
}
}
It is better to use the "prop" than the "attr" function, see here: How to check whether a checkbox is checked in jQuery?
Try this
$(function(){
$('input[name="checkboxAll"]').change(function(){
$('input[name^="checkboxname"]').prop("checked",$(this).is(':checked'))
});
$('input[name^="checkboxname"]').change(function(){
var a=$('input[name^="checkboxname"]').length;
if( $('input[name^="checkboxname"]').filter(":checked").length==a){
$('input[name="checkboxAll"]').prop("checked",true)}
else
{
$('input[name="checkboxAll"]').prop("checked",false)
}
});
});
DEMO
Include jQuery and copy and paste this code
Its working.......
<script>
$(function(){
$('#select_all_').click(function(){
if($('#select_all_').is(':checked')){
$(".check_").attr ( "checked" ,"checked" );
}
else
{
$(".check_").removeAttr('checked');
}
});
$('.check_').click(function(){
$.each($('.check_'),function(){
if(!$(this).is(':checked'))
$('#select_all_').attr('checked',false);
});
});
});
</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />