Develop Reference

How to uncheck a checkbox even if one among the list is unchecked?

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)
}
}
});
});

How to use jQuery for listening if checkbox is changed not by clicking?

I have a number of checkboxes that change state(checked ,not checked) using another jQuery statement:
Elements:
<input type="checkbox" id="select_a">select group A</input>
<input type="checkbox" id="select_b">select group B</input>
<input type="checkbox" id="mix">select mix</input>
<div id="group_a">
<input type="checkbox" id="a_1">group A_1</input>
<input type="checkbox" id="a_2">group A_2</input>
</div>
<div id="group_b">
<input type="checkbox" id="b_1">group B_1</input>
<input type="checkbox" id="b_2">group B_2</input>
</div>
JQUERY
jQuery("#select_a").click(function () {
if (this.checked) jQuery("div#group_a input:checkbox").prop("checked", true);
else jQuery("div#group_a input:checkbox").prop("checked", false);
});
jQuery("#select_b").click(function () {
if (this.checked) jQuery("div#group_b input:checkbox").prop("checked", true);
else jQuery("div#group_b input:checkbox").prop("checked", false);
});
jQuery("#mix").click(function () {
if (this.checked) {
jQuery("#a_1").prop("checked", true);
jQuery("#b_1").prop("checked", true);
} else {
jQuery("#a_1").prop("checked", false);
jQuery("#b_1").prop("checked", false);
}
});
I need a way to set a listener to each checkbox in the groups, I used this way which works like this:
jQuery("div input:checkbox").click(function(e){
alert(e.target.id);
});
but this only works if the checkbox was clicked by the mouse, I would like a way to fire an event(set a listener) for each checkbox if it was checked by something other than the mouse.
Demo

You can use change() event handler
jQuery("div input:checkbox").change(function(){
alert(this.id);
});

Try change event, also for the top controls use radio instead of checkbox as any one would be checked:
$(function() {
var grp1 = $('#group_a').find('input[type=checkbox]');
var grp2 = $('#group_b').find('input[type=checkbox]');
$('input[name=grp]').on('change', function(e) {
var id = this.id;
grp1.prop('checked', 'select_a' === id);
grp2.prop('checked', 'select_b' === id);
if ('mix' === id) {
grp1.eq(0).prop('checked', true);
grp2.eq(0).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- use radio with name -->
<input type="radio" name="grp" id="select_a" />select group A
<input type="radio" name="grp" id="select_b" />select group B
<input type="radio" name="grp" id="mix" />select mix
<div id="group_a">
<input type="checkbox" id="a_1" />group A_1
<input type="checkbox" id="a_2" />group A_2
</div>
<div id="group_b">
<input type="checkbox" id="b_1" />group B_1
<input type="checkbox" id="b_2" />group B_2
</div>

Check all other checkboxes when one is checked

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

Checkboxes group

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" />

jQuery Uncheck checkbox not working

After trying multiple examples on StackOverflow to fix my issue, I still can't figure out my problem.
I have 3 checkboxes:
<input id="pets_dog" class="text" type="checkbox" class="pets" name="pets[]" value="pets_dog"> Dogs</input>
<input id="pets_cats" class="text" type="checkbox" class="pets" name="pets[]" value="pets_cats"> Cats</input>
<input id="pets_none" class="text" type="checkbox" class="pets" name="pets[]" value="pets_no"> None</input>
And when "pets_none" is checked, I need the other 2 checkboxes to be unchecked and vice versa. Here is my current jQuery code:
$("#pets_none").change(function() {
if($("#pets_none").attr('checked')) {
$("#pets_cats").removeAttr('checked');
$("#pets_dogs").removeAttr('checked');
}
});
I can't figure out for the life of me why it's not working, and appreciate any help.

Your html should be
<input id="pets_dog" class="text pets" type="checkbox" name="pets[]" value="pets_dog" /> Dogs
<input id="pets_cats" class="text pets" type="checkbox" name="pets[]" value="pets_cats" /> Cats
<input id="pets_none" class="text pets" type="checkbox" name="pets[]" value="pets_no" /> None​​​​​​​​​​​
JS
$(function(){
$("#pets_none").on('change', function(e) {
if($(this).is(':checked')) {
$("#pets_dog").attr('checked', false);
$("#pets_cats").attr('checked', false);
}
});
});
DEMO.
Update :
You have used class attribute twice, it should be as follows
<input id="pets_dog" type="checkbox" class="pets text" name="pets[]" value="pets_dog" /> Dogs
<input id="pets_cats" type="checkbox" class="pets text" name="pets[]" value="pets_cats" /> Cats
<input id="pets_none" type="checkbox" class="text pets" name="pets[]" value="pets_no" /> None​
JS
$(function(){
$(".pets").on('change', function(e) {
var el=$(this);
if(el.is(':checked') && el.attr('id')=='pets_none') {
$(".pets").not(el).attr('checked', false);
}
else if(el.is(':checked') && el.attr('id')!='pets_none')
{
$("#pets_none").attr('checked', false);
}
});
});
DEMO.

You can use the prop method:
$("#pets_none").change(function() {
if (this.checked) {
$("#pets_cats, #pets_dog").prop('checked', false);
}
});

Use the .prop() method:
...
$("#pets_cats").prop('checked', false);
$("#pets_dogs").prop('checked', false);
...
And to check whether the #pets_none is checked, use that method too:
$("#pets_none").prop('checked');

var checked = $(this).find('Enable').text().toLowerCase();
$("#chk__Enable").each(function () {
if (checked == 'true') {
$(this).attr('checked', 'checked');
} else {
$(this).removeAttr('checked');
}
});