I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery.
For example, if the age checkbox is checked, then I need to show a textbox to enter age, else hide the textbox.
But the following code returns false by default:
if ($('#isAgeSelected').attr('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
Age is selected
</div>
How do I successfully query the checked property?
How do I successfully query the checked property?
The checked property of a checkbox DOM element will give you the checked state of the element.
Given your existing code, you could therefore do this:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
However, there's a much prettier way to do this, using toggle:
$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
Use jQuery's is() function:
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
Using jQuery > 1.6
<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />
// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true
Using the new property method:
if($('#checkMeOut').prop('checked')) {
// something when checked
} else {
// something else when not
}
jQuery 1.6+
$('#isAgeSelected').prop('checked')
jQuery 1.5 and below
$('#isAgeSelected').attr('checked')
Any version of jQuery
// Assuming an event handler on a checkbox
if (this.checked)
All credit goes to Xian.
I am using this and this is working absolutely fine:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
Note: If the checkbox is checked it will return true otherwise undefined, so better check for the "TRUE" value.
Use:
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
Since jQuery 1.6, the behavior of jQuery.attr() has changed and users are encouraged not to use it to retrieve an element's checked state. Instead, you should use jQuery.prop():
$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);
Two other possibilities are:
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
This worked for me:
$get("isAgeSelected ").checked == true
Where isAgeSelected is the id of the control.
Also, #karim79's answer works fine. I am not sure what I missed at the time I tested it.
Note, this is answer uses Microsoft Ajax, not jQuery
If you are using an updated version of jquery, you must go for .prop method to resolve your issue:
$('#isAgeSelected').prop('checked') will return true if checked and false if unchecked. I confirmed it and I came across this issue earlier. $('#isAgeSelected').attr('checked') and $('#isAgeSelected').is('checked') is returning undefined which is not a worthy answer for the situation. So do as given below.
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Use:
<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
if($(this).is(':checked'))
{
var checkedOne=$(this).val()
alert(checkedOne);
// Do some other action
}
})
This can help if you want that the required action has to be done only when you check the box not at the time you remove the check.
You can try the change event of checkbox to track the :checked state change.
$("#isAgeSelected").on('change', function() {
if ($("#isAgeSelected").is(':checked'))
alert("checked");
else {
alert("unchecked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected" />
<div id="txtAge" style="display:none">
Age is selected
</div>
Using the Click event handler for the checkbox property is unreliable, as the checked property can change during the execution of the event handler itself!
Ideally, you'd want to put your code into a change event handler such as it is fired every time the value of the check box is changed (independent of how it's done so).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
I ran in to the exact same issue. I have an ASP.NET checkbox
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
In the jQuery code I used the following selector to check if the checkbox was checked or not, and it seems to work like a charm.
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
I'm sure you can also use the ID instead of the CssClass,
if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
I hope this helps you.
I believe you could do this:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
I decided to post an answer on how to do that exact same thing without jQuery. Just because I'm a rebel.
var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');
// Just because of IE <333
ageCheckbox.onchange = function() {
// Check if the checkbox is checked, and show/hide the text field.
ageInput.hidden = this.checked ? false : true;
};
First you get both elements by their ID. Then you assign the checkboxe's onchange event a function that checks whether the checkbox got checked and sets the hidden property of the age text field appropriately. In that example using the ternary operator.
Here is a fiddle for you to test it.
Addendum
If cross-browser compatibility is an issue then I propose to set the CSS display property to none and inline.
elem.style.display = this.checked ? 'inline' : 'none';
Slower but cross-browser compatible.
This code will help you
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
This works for me:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
There are many ways to check if a checkbox is checked or not:
Way to check using jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Check example or also document:
http://api.jquery.com/attr/
http://api.jquery.com/prop/
This is some different method to do the same thing:
$(document).ready(function (){
$('#isAgeSelected').click(function() {
// $("#txtAge").toggle(this.checked);
// Using a pure CSS selector
if ($(this.checked)) {
alert('on check 1');
};
// Using jQuery's is() method
if ($(this).is(':checked')) {
alert('on checked 2');
};
// // Using jQuery's filter() method
if ($(this).filter(':checked')) {
alert('on checked 3');
};
});
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
Use this:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
The length is greater than zero if the checkbox is checked.
My way of doing this is:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
$(selector).attr('checked') !== undefined
This returns true if the input is checked and false if it is not.
You can use:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Both of them should work.
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
1) If your HTML markup is:
<input type="checkbox" />
attr used:
$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
If prop is used:
$(element).prop("checked"); // Will give you false whether or not initial value is set
2) If your HTML markup is:
<input type="checkbox" checked="checked" />// May be like this also checked="true"
attr used:
$(element).attr("checked") // Will return checked whether it is checked="true"
Prop used:
$(element).prop("checked") // Will return true whether checked="checked"
This example is for button.
Try the following:
<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});
The top answer didn't do it for me. This did though:
<script type="text/javascript">
$(document).ready(function(){
$("#li_13").click(function(){
if($("#agree").attr('checked')){
$("#saveForm").fadeIn();
}
else
{
$("#saveForm").fadeOut();
}
});
});
</script>
Basically when the element #li_13 is clicked, it checks if the element # agree (which is the checkbox) is checked by using the .attr('checked') function. If it is then fadeIn the #saveForm element, and if not fadeOut the saveForm element.
To act on a checkbox being checked or unchecked on click.
$('#customCheck1').click(function() {
if (this.checked) {
console.log('checked');
} else {
console.log('un-checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="customCheck1">
EDIT: Not a nice programming expression if (boolean == true) though .checked property might return other type variables as well..
It is better to use .prop("checked") instead. It returns true and false only.
I am using this:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.
Assuming that you have the following HTML:
<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />
You can use the following CSS to achieve the desired functionality:
#show_textbox:not(:checked) + input[type=text] {display:none;}
For other scenarios, you may think of appropriate CSS selectors.
Here is a Fiddle to demonstrate this approach.
Related
EDIT: I should have explained that the second set of checkboxes only some are enabled depending on what the user selects from the first set - if a user selects the first checkbox, then the second checkbox in the second set is enabled, whereas if they select the second box in the first set then a different set of checkboxes in the second set are enabled. Apologies, should have explained more clearly.
I have a two series of checkboxes as follows:
<input class="oDiv" type="checkbox" value="1" />
<input class="oDiv" type="checkbox" value="2" />
<input disabled="disabled" class="Spec" type="checkbox" value="1" />
<input disabled="disabled" class="Spec" type="checkbox" value="2" />
<input disabled="disabled" class="Spec" type="checkbox" value="5" />
<input disabled="disabled" class="Spec" type="checkbox" value="8" />
<input disabled="disabled" class="Spec" type="checkbox" value="10" />
<input disabled="disabled" class="Spec" type="checkbox" value="30" />
I have some jQuery code that enables the second set of checkboxes based on a selection:
$('.oDiv').on('click', function() {
var select = $(this).val();
if(select==1){
$('.Spec:eq(1)').prop('disabled', false);
}
else{$('.Spec').prop('disabled', true);}
});
Now, what happens is that when a user selects 1, the correct checkbox in the second list is enabled but when the user clicks off, it doesn't disable.
jsFiddle: http://jsfiddle.net/pvSeL/
So what I am trying to achieve is when a user selects a checkbox, the relevant items are enabled and when they uncheck the checkbox they become disabled.
If you want to toggle a checkbox based on the checked state of another,
$('.oDiv').on('click', function() {
var select = $(this).val();
if(select==1) {
$('.Spec:eq(4)').prop('disabled', !$(this).is(':checked'));
}
});
jsFiddle
To generalise this process, you can do the following:
$('.oDiv').on('click', function () {
var enable = {
1: [1, 2, 30],
2: [5, 8, 10]
};
var val = $(this).val();
var checked = $(this).is(':checked');
enable[val] && enable[val].forEach(function (v) {
console.log( $('.Spec[value="' + v + '"]'));
$('.Spec[value="' + v + '"]')
.prop('disabled', !checked);
});
});
jsFiddle
val() will always return 1 in your code as it gets the value attribute from the element, regardless of whether it is checked/selected or not. You can use the checked property of the native DOM element to do this:
$('.oDiv').on('click', function () {
if (this.checked) {
$('.Spec:eq(1)').prop('disabled', false);
} else {
$('.Spec').prop('disabled', true);
}
});
You could also use the :checked selector in jQuery.
Updated fiddle
How does this work if I only want a selection of the second set of checkboxes enabled if the first checkbox is 1 and then a different set if the checkbox is 2?
You need to put some logic in place to check the states of both checkboxes when either of them is clicked. Something like this:
$('.oDiv').on('click', function () {
var $checkboxes = $('.oDiv');
$('.Spec').prop('disabled', true);
if ($checkboxes.eq(0).prop('checked') && $checkboxes.eq(1).prop('checked')) {
$('.Spec').eq(1).prop('disabled', false);
}
else if ($checkboxes.eq(0).prop('checked')){
$('.Spec').eq(2).prop('disabled', false);
}
else if ($checkboxes.eq(1).prop('checked')){
$('.Spec').eq(3).prop('disabled', false);
}
});
Example fiddle
For a checkbox, val() will always return the value of the checkbox, that is, the value that would be submitted when it is checked and the form is posted. To check if a checkbox is checked, use
$(this).prop('checked')
or
$(this).is(':checked')
or just
this.checked
Also see http://jquery-howto.blogspot.nl/2013/02/jquery-test-check-if-checkbox-checked.html for more information and useful tricks.
I'm struggling slightly to work out what you want to do. But I think you probably want to do something like this:
$('.oDiv').on('click', function () {
var select = this.value; // get the value of the element clicked
$('.Spec')
.prop('disabled', true) // disable all .Spec checkboxes
.eq(select) // look at the checkbox with the position given
// by select
.prop('disabled', !this.checked); // set it to disabled or enabled
// depending on whether the box is
// checked
});
http://jsfiddle.net/lonesomeday/pvSeL/2/
Although the following function has a little problem. But I can not find. Every time either checkbox is checked or not but form was not submitted!!
<input type="checkbox" name="chk_user[]" value="1" class="chk_delete" id="1" />
<input type="checkbox" name="chk_user[]" value="2" class="chk_delete" id="2" />
<input type="checkbox" name="chk_user[]" value="3" class="chk_delete" id="3" />
<input type="checkbox" name="chk_user[]" value="4" class="chk_delete" id="4" />
<script>
$("form").submit(function() {
$('.chk_delete').each(function(){
if($(this).is(':checked')){
return true;
}
});
alert("No entry was selected!");
return false;
});
</script>
Can anybody locate the problem?
The following is working, but I don't understand why. Any good logic?
$("form").submit(function(e) {
if(!$('input[type=checkbox]:checked').length) {
e.preventDefault();
alert("No entry was selected!"); }
return true; });
Give this a whirl:
$("form").submit(function(e) {
if(!$('input[type=checkbox]:checked').length) {
e.preventDefault();
alert("No entry was selected!"); }
return true; });
You are using the return true into the each loop. Using return in the each loop just mean if the loop continue (on true) or if it stop (on false).
That beign said, you script will alway roll hover a return false, preventing the form from submiting.
What you could do
If you want to keep the loop, save if it's true or false in a var!
var isChecked = false;
$('.chk_delete').each(function(){
isChecked = $(this).is(':checked')
return !isChecked;
});
return isChecked;
OR
Use your working script, I don't see what's wrong with it
$("form").submit(function(e) {
if(!$('input[type=checkbox]:checked').length) {
e.preventDefault();
alert("No entry was selected!");
}
return true;
});
$('input[type=checkbox]:checked') select every checked box. So $('input[type=checkbox]:checked').length take the length. Having ! is the same thing as !=.
Finally, !$('input[type=checkbox]:checked').length is a shotcut for $('input[type=checkbox]:checked') != 0. If true, it .preventDefault() wich prevent the form of submiting.
If the value of the input box for charge_amt is not entered I'm using an onbeforeunload jquery event which notifys the user they didn't enter an amount. After they enter the amount they are allowed to save.
<td><input type="hidden" name="charge_cc" value="0" class="">
<input type="checkbox" id="charge_cc" name="charge_cc" value="1" checked="" class=""> Charge CC? Amount $ <input type="text" id="charge_amt" name="charge_amt" value="523" size="8" maxlength="6"></td>
<script>
$(document).ready(function(){
$("input[type='text'], select, textarea").change(function(){
window.onbeforeunload = function()
{
return "You have not saved an amount to be charged.";
}
});
$("charge_amt").submit(function(){
window.onbeforeunload = null;
});
});
</script>
The second event is for the complete button.
<input type='checkbox' name='reorder_comment_for_CC'> Verify Charge and Leave Comment" ?>
If they go to hit complete but this checkbox hasn't been marked i would like to alert them that they will not be able to complete the event without verifying/checking.
Maybe I should just use two separate events like so:
<script type="text/javascript">
$("#charge_amt").keypress(function() {
if($(this).val().length > 1) {
return "You have not input an amount to be charged.";
} else {
return "Thank you for entering a charge amount, you can now save.";
}
});</script>
You can check both if the user has entered a correct value in charge_amt and if they have checked the checkbox like this. You also seem to be a little confused about the jQuery syntax. You should use #the_id_of_the_element to find a single element. The submit() event is attached to your form not to the field charge_atm.
$("#id_of_your_form").submit(function() {
//Here you can check the checkbox
//This assumes you add the id of the checkbox to be the same as the name
var $checked = $(this).find("#reorder_comment_for_CC").is(":checked");
var $validValue = $(this).find("#charge_amt").val().length > 0;
if (!$checked) {
alert("You haven't verified charge");
return false;//prevent submitting
}
if (!$validValue) {
alert("Invalid value");
return false;
}
return true;
});
I've created an HTML form that has checkboxes that are checked dynamically due to a variable from a previous page (there is only one checkbox checked each time).
What I'd like is to echo the value of this checkbox out (to make the main title of the page so javascript alert is not adapted).
Example :
<html>
<body>
<h1>Here I'd like to echo the value of the checkbox that is checked<h1>
<form id="myform" name="myform">
<p>
<input type="checkbox" name="car" id="porsche" /> <label for="porsche">porsche</label><br />
<input type="checkbox" name="car" id="ferrari" /> <label for="ferrari">ferrari</label><br />
</p>
<script type="text/javascript">
function loopForm(form,car) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].id == car) {
form.elements[i].checked = true ;
}
}
}
}
...
// This function will check one of the two checkboxes
loopForm(document.myform,car);
</script>
</body>
</html>
The best I can do, I'm afraid, is the following:
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
for (i=0; i<inputs.length; i++){
if (inputs[i].type == 'checkbox' && inputs[i].getAttribute('checked') == 'checked'){
checkboxes.push(inputs[i].value);
}
}
document.getElementsByTagName('h1')[0].innerHTML = checkboxes;
JS Fiddle demo.
This is slightly clunky, but does, at least, use plain JavaScript; albeit it does seem to require that the checked checkboxes be marked up as following: checked="checked".
You can use jQuery to achieve this. Listen for the change() event on the checkboxes and change the text() of the h1 when this happens.
I have a table with checkboxes and I want to do the "check all" and "un-check all" checkboxes but I could not find the way to check all the checkboxes.
Here is my code:
<form>
<?php foreach ($this->entries as $entry): ?>
<tr class="table_head_seperator">
<td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]" /></td>
<td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['user_name'] ?></span></td>
<td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['date_created'] ?></span></td>
<td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name"><?php echo $entry['user_type_name'] ?></span></td>
</tr>
<?PHP endforeach; ?>
<input type="checkbox" class="chk_boxes" label="check all" />check all
<input type="checkbox" class="unchk_boxes" /> un-check all
</form>
<script type="text/javascript">
$(document).ready(function() {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',checked)
})
});
</script>
$(function() {
$('.chk_boxes').click(function() {
$('.chk_boxes1').prop('checked', this.checked);
});
});
This only affects the check all box. But why would you want to use two checkboxes anyway? One to check all and one to uncheck all, but not mutually exclusive. That's got to be the recipe to confuse users :)
Try using true|false. Like so:
$('.chk_boxes1').attr('checked',true);
Additional comment:
In addition, it appears your un- and check all checkboxes are redundant.
<input type="checkbox" class="chk_boxes" label="check all" />check all
<input type="checkbox" class="unchk_boxes" /> un-check all
Rather than doing that, you can just have one checkbox that does both. Thus, your jQuery will look like:
$(document).ready(function() {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',$(this).attr('checked'));
})
});
With HTML:
<input type="checkbox" class="chk_boxes" label="check all" />check all
See the working solution here http://jsfiddle.net/HBGzy/
you don't need to use the "uncheck all" checkbox :)
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
You forgot about quotes:
$('.chk_boxes1').attr('checked','checked')
fiddle: http://jsfiddle.net/8ZHFn/
Try this
$(".chk_boxes").click(function()
{
var checked_status = this.checked;
$(".chk_boxes1").each(function()
{
this.checked = checked_status;
});
});
So, if the class name of all the checkboxes you want to affect when checking or unchecking the checkbox with class chk_boxes,is chk_boxes1 this will get all the elements and set the checked property accordingly.
Check-uncheck all / select-unselect all checkboxes
Follow the following code , its really simple with the following code
inside your html form add the following line of code
<input type="checkbox" id='checkall' /> Select All
and than add the following script
<script type='text/javascript'>
$(document).ready(function(){
// Check or Uncheck All checkboxes
$("#checkall").change(function(){
var checked = $(this).is(':checked');
if(checked){
$(".checkbox").each(function(){
$(this).prop("checked",true);
});
}else{
$(".checkbox").each(function(){
$(this).prop("checked",false);
});
}
});
// Changing state of CheckAll checkbox
$(".checkbox").click(function(){
if($(".checkbox").length == $(".checkbox:checked").length) {
$("#checkall").prop("checked", true);
} else {
$("#checkall").removeAttr("checked");
}
});
});
</script>
keep in mind that .checkbox in script code is the class name from other checkboxes of html form
for example if you have input checkbox as following
<input class="checkbox" name="emailid[]" type="checkbox" value="<?php echo $email;?>" />
i think you should use the true or false for the checkbox attribute.
<script type="text/javascript" charset="utf-8">
$('document').ready( function() {
$('.chk_boxes').click( function() {
$(':checkbox').attr('checked',true);
});
});
</script>
An advice about check all/uncheck all..
As my think after selecting check all, if user clicks any of checkbox1s, the check all checkbox should be unchecked and also without clicking check all box, if user selects all checkbox1s one by one the checkbox should be selected. So i suggest you to try this when using check all/uncheck all..
$(document).ready(function() {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',$(this).attr('checked'));
})
$('.chk_boxes1').click(function(){
if($('.chk_boxes1').length == $('.chk_boxes1:checked').length)
$('.chk_boxes').attr('checked',checked)
else
$('.chk_boxes').attr('checked',false)
})
});