Check/Select All?

alrukus · 10-27-2003, 07:38 PM

Hey is there a code I can use so that if i have a form with check boxes when i click like 'Check All' or something it will select every choice instead of the user having to select every option?

beetle · 10-27-2003, 08:15 PM

Yes, there's several ways.

What would you prefer? A single checkbox that controls the checking/unchecking of all the others? Or a button that says "Check All", then when clicked says "Uncheck All".

Also, can I see the HTML of your form?

Willy Duitt · 10-27-2003, 08:19 PM

Here's one way:

<script type="text/javascript">

</script>
</HEAD.

<BODY>
<form name="myform">
<input type="checkbox" name="list" value="1">1<br>
<input type="checkbox" name="list" value="2">2<br>
<input type="checkbox" name="list" value="3">3<br>
<input type="checkbox" name="list" value="4">4<br>
<input type="checkbox" name="list" value="5">5<br>

<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
</form>

.....Willy

alrukus · 10-27-2003, 10:31 PM

Hey Beetle

i wanted it so it could just be another check box that when checked it would check every other box ya know? it could say check all or select all etc...

beetle · 10-27-2003, 11:18 PM

Okay, here you go

Code:

<html>
<head>
    <title>Test</title>

    <script type="text/javascript">

        function checkAll( control, cbGroupName )
        {
            var cbGroup = control.form.elements[cbGroupName], i = 0, cb;
            while( cb = cbGroup[i++] )
            {
                cb.checked = control.checked;
            }
        }

    </script>
</head>
<body>

    <form>
        <input type="checkbox" onclick="checkAll( this, 'group1' );"/> Check all
        <br/>
        <input type="checkbox" name="group1" value="1"/><br/>
        <input type="checkbox" name="group1" value="2"/><br/>
        <input type="checkbox" name="group1" value="3"/><br/>
        <input type="checkbox" name="group1" value="4"/><br/>
    </form>

</body>
</html>

If the group will ever be only 1 checkbox, this function will need some additional code to prevent errors.