I have a dynamic form that has a number of checkboxes in it. I want to create a "select all" method that when clicked automatically checks all the boxes in the form.
[x] select all //<input type="checkbox" id="select-all"> Select all
[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">
[submit]
My jQuery is as follows:
$(document).ready(function(){
$('#select-all').click(function() {
if (this.checked)
{
console.log("Check detected");
$('.checkbox1').each(function() {
console.log('Checking the item with value:' + this.value );
$(this).prop('checked', true);
console.log(this);
});
} else {
console.log("not checked");
}
});
});
My console output:
> Check detected
> Checking the item with value:1
> <input type="checkbox" id="1" class="checkbox1" value="1">
> Checking the item with value:2
> <input type="checkbox" id="2" class="checkbox1" value="2">
I am able to loop through each item however, I am not sure how to actually set the checkbox to checked.
The part I am struggling with is the actual setting of the checked state, I know I need to use: .prop('checked',true) however, what do I use for the actual element? $(this) obviously does not work...
$(this).prop('checked', true);
Use this simple code
$(".checkAll").change(function(){
$('.checkbox1').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />
<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
You are referring #select-all as (this.checked) ,You need to refer as $(this).
Secondly you can use :checked to find out if it is checked or not.
Thirdly you dont need to loop over $('.checkbox1'). jquery will match all elements and will update the attribute.
Below is the snippet which may be helpful
$(document).ready(function() {
$('#select-all').click(function() {
if ($(this).is(":checked")) {
console.log("Check detected");
$('.checkbox1').prop('checked', true)
} else {
$('.checkbox1').prop('checked', false)
}
});
// If select-all is selected and if one check box is unchecked ,
//then select-all will be unchecked
$('.checkbox1').click(function(event) {
if ($(this).is(':checked')) {
// #select-all must be checked when all checkbox are checked
} else {
if ($('#select-all').is(':checked')) {
$('#select-all').prop('checked', false)
}
}
})
});
JSFIDDLE
demo link
js code
$('.checkbox1').click(function(event) {
var _this = $(this);
if (!_this.prop('checked')) {
$('#select-all').prop('checked', false)
}
})
$('#select-all').click(function() {
var _this = $(this);
var _value = _this.prop('checked');
console.log("Check detected");
$('.checkbox1').each(function() {
console.log('Checking the item with value:' + this.value);
$(this).prop('checked', _value);
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all
<input type="checkbox" id="1" class="checkbox1" value="1">
<input type="checkbox" id="2" class="checkbox1" value="2">
Just to answer this question. I tried the various solutions offered and they appeared not to work. However I then realised that due to using Jquery Uniform I needed to add an additional bit of code to get the display to work correctly:
This post was helpful.
Thank you to all who have taken the time to answer.
My final code:
$(document).ready(function(){
$('#select-all').click(function() {
if (this.checked)
{
$('.checkbox1').prop('checked', true);
} else {
$('.checkbox1').prop('checked', false);
}
$.uniform.update('.checkbox1');
});
});
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)
}
}
});
});
i have a list of check-boxes which is created dynamically and there is input field for each check box so i want to disable the check box if input field value is zero. below is my code
HTML code
<input class="check" id="check" name="check" type="checkbox"><label for="check">checkbox <input type="hidden" id="test" value="0" /></label>
<input class="check" id="check1" name="check1" type="checkbox"><label for="check1">checkbox1 <input type="hidden" id="test" value="6" /></label>
Jquery
if($("#test").val() == "0"){
$('.check').attr("disabled", "disabled");
}
jsfiddle
You used twice id=test and JavaScript works with only the first of them.
Change id=test to class=test, or works with two differents ids.
Working code:
$('.test').each(function() {
if ($(this).val() == '0') {
$(this).parent().prev().attr('disabled', 'disabled');
}
});
http://jsfiddle.net/cDD5L/
$("input[type=hidden]").each(function() {
if($(this).val()==0){
$(this).parent().prev().attr('disabled', 'disabled');
}
});
Demo:
http://jsfiddle.net/SxypS/
Please use
$(function() {
enable_cb();
$("#group1").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}
It will work for you.
Let me know if still not work
Why in my js code can just with one click on name:check_all checking all checkboxes?
HTML:
<div id="ss">
<input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
jQuery:
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.attr("checked" , true);
} else {
checkboxes.attr ( "checked" , false );
}
});
DEMO: http://jsfiddle.net/KdaZr/
My jQuery version is 1.9.
How can fix it?
Use prop method. When your markup is rendered attributes become properties of the elements, using JavaScript you should modify properties of the element.
$(document).on('change','input[name="check_all"]',function() {
$('.idRow').prop("checked" , this.checked);
});
http://jsfiddle.net/GW64e/
Note that if input[name="check_all"] is not generated dynamically there is no need to delegate the event.
Use .prop, not .attr, to change properties of elements. .attr is for HTML attributes.
http://jsfiddle.net/KdaZr/1/
fix is as follow:-
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.each(function(){
this.checked = true;
});
} else {
checkboxes.each(function(){
this.checked = false;
});
}
});
A complete solution select || deselect checkbox jQuery :
$(document).ready(function() {
$("#checkedAll").change(function(){
if(this.checked){
$(".checkSingle").each(function(){
this.checked=true;
})
}else{
$(".checkSingle").each(function(){
this.checked=false;
})
}
});
$(".checkSingle").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkSingle").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }
}
else {
$("#checkedAll").prop("checked", false);
}
});
});
Html should be :
Single check box on checked three checkbox will be select and deselect.
<input type="checkbox" name="checkedAll" id="checkedAll"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
Hope this helps to someone as it did for me.
I have this HTML code
<input type="checkbox" name="city_pref[]" id="city_all" value="0" checked /><label for="city_all">All</label>
<input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" /><label for="city_pref_1">Chicago</label>
<input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" /><label for="city_pref_2">Texas</label>
And, I have placed my code in a fiddle, which is working correctly. What I really want to do is, when none of the checkboxes are selected, then I want the all checkbox to get selected automatically.
try the following:
$('input[type=checkbox]').change(function(){
if ($('input[type=checkbox]:checked').length == 0) {
$('#city_all').prop('checked', true)
}
})
DEMO
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]:checked').length == 0)
$('#city_all').attr('checked', 'checked');
});
All you really need is one line ?
$('input[type="checkbox"][name="city_pref[]"]').on('change', function(e){
this.checked ? $(this).siblings('[name="city_pref[]"]').prop('checked', false) : $("#city_all").prop('checked', true);
});
FIDDLE