Develop Reference

Adding and removing from count when checkbox is checked/unchecked with javascript/jquery?

I'm relatively new to JS, so I'm getting a little stuck with this:
Let's say I have 40 checkboxes, but a user can select no more than 10.
I have the checkboxes set out, labelled checkbox1, checkbox2 etc right up to 40. The user cannot select more than 10. How would I go about doing this?
The way I thought of doing it would be like this, but I'm unsure whether or not this would work, due to obviously having 40 fields and then what if they uncheck one?
function checkValidation() {
if (document.getElementById('checkbox1').isChecked()) {
document.getElementById('validation').value() + 1;
}
}
So every time it's checked, it would add 1 to the textbox validation and then I could do an if statement to say if validation.value() > 8 then alert out to say they can't check anymore.
I think that's not the best way, as if they uncheck the box, my function won't take this in consideration?
Hopefully this makes sense, if anything needs clarification please let me know and I can explain further.

Try the following way:
$('#myBtn').click(function(){
var countCheckd = $('input[type=checkbox]:checked').length;
if(countCheckd >= 3){
console.log('You have 3 or more checked: ' +countCheckd);
}
else{
console.log('You have less than 3 checked: ' +countCheckd);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />1
<input type="checkbox" />2
<input type="checkbox" />3
<input type="checkbox" />4
<input type="checkbox" />5
<br><br>
<input type="button" id="myBtn" value="Check"/>

You can add a class on all your considered checkboxe, called for example chk.
Then you declare your count function :
function countCheck(){
return $(".chk:checked").length;
}
Finally you add an event on your checkboxes click :
$(document).on("click",".chk",function(){
var numberChecked = countCheck();
//update your input
$("#validation").val(numberChecked );
});

Just make an event of checkbox click and check for the count of each click, in below example if the click is exceeded then 5 it gives an alert message and won't be allowed to click more checkboxes.
$(function(){
for(var i=0;i<=30;i++){
$(".test").append("checkbox "+i+"<input type='checkbox' name='chk[]' class='check' id='check_"+i+"'><br />");
}
})
$(document).on("click",".check",function(){
var checked = $(".check:checked").length
if(checked > 5){
alert("Maximum 5");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='test'>
</div>

You can try something like this:
$('input[type=checkbox]').on('change', function (e) {
if ($('input[type=checkbox]:checked').length > 10) {
$(this).prop('checked', false);
alert("Only 10 selection is allowed");
}
});

This code is unchecking previous checkbox if checked input's length more than 10:
$('input[type="checkbox"]').on('click', function(){
var max=0;
var t=$(this);
$('input[type="checkbox"]:checked').each(function(){
if($(this).data('oops')>max){
max=$(this).data('oops');
}
});
t.data('oops', (max+1));
if($('input[type="checkbox"]:checked').length>10){
$('input[type="checkbox"]:checked').each(function(){
if($(this).data('oops')==max){
$(this).prop('checked', false);
}
});
}
});
Without adding global variable.
See

This works:
// these are global variables
var checkBoxChecks = 0;
var maxChecks = 10;
$('input[type="checkbox"]').on('click', function()
{
// if the currently clicked checkbox is now checked
if(this.checked)
{
if(checkBoxChecks < maxChecks) checkBoxChecks++;
else
{
this.checked = false;
alert("You have reached the maximum amount of " + maxChecks + " checks.");
}
}
else checkBoxChecks--;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

How to check specific number of checbox and disable remaining using jquery?

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

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 select label of selected checkboxes

When I click a button I want to get the value from each of the checked check boxes. I really just want to populate an array with all the check boxes that are checked.
I started a simplified example here: http://jsfiddle.net/kralco626/JvAdg/1/
The actual code is more like this:
var dataList = new Array(10);
dataList[0] = "Delete";
dataList[1] = LD_LicenseNumber.val();
dataList[2] = $("#LDOperatingCompanies input:checked").val();
And aspx code:
<div id="LDOperatingCompanies">
<input type="checkbox" value="o1" id="o1" name="LDOperatingCompanies" /><label for="o1">o1</label>
<input value="o2" type="checkbox" id="o2" name="LDOperatingCompanies" /><label for="o2">o2</label>
<input value="o3" value="o1" type="checkbox" id="o3" name="LDOperatingCompanies" /><label for="o3">o3</label>
</div>
Thanks!

here is an update to your fiddle that puts all checked boxes into an array Example
HTML
<div id="LDOperatingCompanies">
<input type="checkbox" id="o1" name="LDOperatingCompanies" /><label for="o1">o1</label>
<input type="checkbox" id="o2" name="LDOperatingCompanies" /><label for="o2">o2</label>
<input type="checkbox" id="o3" name="LDOperatingCompanies" /><label for="o3">o3</label>
</div>
<input type="button" id="btn" value="alert checked boxes" />
JavaScript
var checks = [];
$('#btn').click(function(e) {
$(':checked').each(function(index, item) {
checks.push( item );
});
if(checks.length == 0) alert('nothing checked');
else alert(checks);
});