check all the checkbox using checkbox

Question

Possible Duplicate:
checkbox check all option

<form action='ppc_logistic-control_number.php' target='_blank' method='post'>
<b>Sample Program</b><br>
<input type='checkbox'>
<?php
for($i=0;$i<5;$i++)
{
print"<input name='checkbox[]' type='checkbox' id='checkbox[]' value='$i->logi_id' value='$i->ppc_id' style='margin-left:-5px'><br>";
}                       
?>
<input type="submit" value="submit" name="gen"/>

what jquery or javascript code i need to place here in order: when i check the checkbox in top of 5 checkbox, all the checkbox will have a check, and when I remove the checkbox that ive previously check also the 5 checkbox will remove thier check.

sample: enter image description here

sample demo thank you so much.

there is no link to a demo. And, you can't have multiple elements with the same id. — 11684, Oct 10 '12 at 07:11
Try this link [http://stackoverflow.com/questions/7259335/select-all-checkbox][1] [1]: http://stackoverflow.com/questions/7259335/select-all-checkbox — Amit Garg, Oct 10 '12 at 07:11

Sushanth -- · Answer 1 · 2012-10-10T07:55:13.430

4

Check DEMO

This will be the basic logic.

ID in the HTML page should be unique.. Try using class instead

edited Oct 10 '12 at 07:55

answered Oct 10 '12 at 07:14

Sushanth --

55,259
9
66
105

score 1 · Answer 2 · answered Oct 10 '12 at 07:25

using javascript

<input type="checkbox" value="select" onclick="javascript:checkAll()" name="allbox" class="table_ckbox" /></th>

function checkAll()

{

for (var i=0;i<document.delete_form.elements.length;i++)
{
    var e=document.delete_form.elements[i];
    if ((e.name != 'allbox') && (e.type=='checkbox'))
    {
        e.checked=document.delete_form.allbox.checked;
    }
}
return false;
 }

in php where you use allcheck box

foreach($listArr as $list) {

 echo '<td><input type="checkbox" value="'.$list['id'].'" name="module[]" /></td>';
 }

score 1 · Answer 3 · answered Oct 10 '12 at 07:48

Try this

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample Program</title>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

</head>

<body>
<form action='ppc_logistic-control_number.php' target='_blank' method='post'>
<b>Sample Program</b><br>
<div id="check-b">
<input type='checkbox' id="top-checkbox">
<?php
for($i=0;$i<5;$i++)
{
print"<input name='checkbox[]' type='checkbox' id='checkbox[]' value='$i->logi_id' value='$i->ppc_id' style='margin-left:-5px'><br>";
}                       
?>
<input type="submit" value="submit" name="gen"/>
</div>
</form>
<script type="text/javascript">
$(function(){
    $('#top-checkbox').change(function(){
        var isChecked = $(this).attr("checked");
        if (isChecked) {
        $('#check-b').find(':checkbox').prop('checked', true);   
        }else{
            $('#check-b').find(':checkbox').prop('checked', false);   
        }
    });

});
</script>

</body>
</html>

It works fine when i use your code. but when i try to put that code in my actual code it does not work? maybe because my checkbox is inside a ? or because i use many jquery... heading like jquery1.8.... — Robert John Concepcion, Oct 10 '12 at 09:10

balanv · Answer 4 · 2012-10-10T16:55:32.463

Below is the sample showing check and uncheck checkbox based on class.

You might want to make class of first element to parent and all others to child, the below code will simply ease your job

NOTE: Copy and paste this code in a html file, and play around, then you will get a good understanding.

<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $(".parent").click(function(){
        var check = $(this).attr('checked');
        if(check=="checked")
        {
         $(".child").attr('checked','checked');
        }
        else
         $(".child").removeAttr('checked');
   });
 });
</script>

<input type="checkbox" name="vehicle1" id="vehicle1" class="parent" value="Bike">Parent<br />
<input type="checkbox" name="vehicle2" id="vehicle2" class="child" value="Car">Child 1<br />
<input type="checkbox" name="vehicle3" id="vehicle3" class="child" value="Car">Child 1<br />
<input type="checkbox" name="vehicle4" id="vehicle4" class="child" value="Car">Child 1<br />
<input type="checkbox" name="vehicle5" id="vehicle5" class="child" value="Car">Child 1<br />

</body>
</html>

check all the checkbox using checkbox

4 Answers4