Select All Checkbox

Question

I have a webpage that returns search results in a table/form. I would like to have a select all checkbox, that would select all the checkboxes for the search results. My code for the display results is below:

<form action="noJavaScript.php" name="theForm" method="post">
<table style="border: 1px solid black" RULES=ALL FRAME=VSIDES>
<th> </th><th>Order #</th><th>Inspector</th><th>Reference #</th><th>Client Name</th><th>Property Address</th><th>City</th><th>State</th><th>Zip</th><th>Inspection Date</th>
        <?php
            while ($row = mysql_fetch_assoc($result))
            {
                echo '<tr><td>';
                echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'"/>';
                echo '</td>';
                foreach ($row as $key => $value)
                    echo '<td>'.htmlspecialchars($value).'</td>';
                echo '</tr>';
            }
        ?>

    </table>
<input type="submit" name="submit" value="Edit/Modify Order" onClick="document.theForm.action='modify.php'">
<input type="submit" name="submit" value="Clone Order" onClick="document.theForm.action='clone.php'">
<input type="submit" name="submit" value="Delete Order" onClick="document.theForm.action='deleteorder.php'">
<input type="submit" name="submit" value="Archive Order" onClick="document.theForm.action='archive.php'">

</form>

I have tried using the following function:

<script type="text/javascript"
<!--
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
    if(!document.forms[FormName])
        return;
    var objCheckBoxes = document.forms[FormName].elements[FieldName];
    if(!objCheckBoxes)
        return;
    var countCheckBoxes = objCheckBoxes.length;
    if(!countCheckBoxes)
        objCheckBoxes.checked = CheckValue;
    else
        // set the check value for all check boxes
        for(var i = 0; i < countCheckBoxes; i++)
            objCheckBoxes[i].checked = CheckValue;
}
// -->
</script>

And the button like this:

        <input type="button" onclick="SetAllCheckBoxes('theForm', 'myCheckbox', true);" value="Check All">;

But I can't get it to work.

What does `myCheckbox` refer to? You don't name the checkboxes as such. — pimvdb, Aug 31 '11 at 15:24
JavaScript works client-side; therefore the php is irrelevant. Can you post a representative example of the rendered html? — David Thomas, Aug 31 '11 at 15:26
@pimvdb Even if I change "myCheckbox" to what I name my checkboxes, it still doesn't work. — James, Aug 31 '11 at 15:27
@pimvdb Where is the Check All button? I don't want all the orders selected right away. I want a button "Check All" that when the user clicks that button, then it will select all the checkboxes in the results. — James, Aug 31 '11 at 15:33
@James: Then, instead of executing it immediately, bind a function to the button like http://jsfiddle.net/KbkZk/1/. — pimvdb, Aug 31 '11 at 15:35
I tried the one in the last link you posted but I get this error: Uncaught TypeError: Cannot set property 'onclick' of null — acidking, Aug 25 '12 at 18:20

score 1 · Answer 1 · answered Aug 31 '11 at 15:37

Add a class to each checkbox input.

echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'" class="yourclass" />';

Then in javascript iterate over all input fields in the docment and check whether they have both type="checkbox" and class="yourclass". And set all of them to CHECKED!

score 1 · Answer 2 · answered Aug 31 '11 at 16:23

1

You can use jquery to do this in simpler way

$("form input:checkbox").attr('checked','true');

answered Aug 31 '11 at 16:23

Sathish Kumar

369
1
3
10

score 1 · Answer 3 · answered Aug 31 '11 at 17:25

1

var form = document.getElementsById('form_id');
var checkBoxes = form.getElementsByTagName('input');
for (var i in checkBoxes)
{
   if (checkBoxes[i].type=="checkbox")
      checkBoxes[i].checked = true; 
}

answered Aug 31 '11 at 17:25

ZigZag

539
1
8
19

elciospy · Answer 4 · 2012-09-05T13:46:04.887

Best solution 4 u is a Jquery script

/*Unik Checkbox to mark/desmark other checkboxes*/
<input type="checkbox" onclick="selectAllCheckBoxes(this)" id="checkBoxUnik"/>

/*Several other Checkboxes inside loop*/
<input type="checkbox" onclick="unselectCheckBoxUnik()" class="checkBoxInLoop" />

<script>
    function selectAllCheckBoxes(obj){
        $('input:checkbox:not(:disabled).checkBoxInLoop').prop('checked', jQuery(obj).prop('checked'));
    }

    function unselectCheckBoxUnik(){

        /*first you verify if the quantity of checkboxes equals number of checkboxes*/
        a = $('input:checkbox:not(:disabled).checkBoxInLoop:checked').size();
        b = $('input:checkbox:not(:disabled).checkBoxInLoop').size();

        /*if equals, mark a checkBoxUnik*/
        ((a == b)? $('#checkBoxUnik').prop("checked", true) : $('#checkBoxUnik').prop("checked", false));
    }
</script>

Select All Checkbox

4 Answers4

Linked

Related