How To Make Simple Select All In Check Box Using JavaScript

Submitted by alpha_luna on Thursday, July 30, 2015 - 16:51.

Good Day!!!

In this tutorial, we are going to make a Simple Select All In Check Box Using JavaScript. This is simple coding to have this project. And, this is a toggle function.

Directions:

For JavaScript Code:

<!-- Start of JavaScript -->
        <script language="JavaScript">
        function toggle(source)
        {
        checkboxes = document.getElementsByName('check_all');
        for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
        }
        </script>
<!--End of JavaScript -->

For HTML Code:

<table border="1" style="border:4px groove #CCC;" cellpadding="3" cellspacing="3">
        <tbody>
                <tr>
                        <td colspan="2" style="text-align:center; font-weight:bold;">COURSE</td>
                </tr>
                <tr>
                        <td><input type="checkbox" onClick="return toggle(this);" /></td>
                        <td><span style="color:blue;">Select All</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSIS"></td>
                        <td><span style="color:green;">BSIS</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSCE"></td>
                        <td><span style="color:orange;">BSCE</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSHRM"></td>
                        <td><span style="color:pink;">BSHRM</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSIT"></td>
                        <td><span style="color:red;">BSIT</span></td>
                </tr>
        </tbody>
</table>

Full Source Code:

<!DOCTYPE html>
<html>
<head>
<title>Select All Check box</title>
 
<!-- Start of JavaScript -->
        <script language="JavaScript">
        function toggle(source)
        {
        checkboxes = document.getElementsByName('check_all');
        for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
        }
        </script>
<!--End of JavaScript -->
 
</head>
<body>
 
<table border="1" style="border:4px groove #CCC;" cellpadding="3" cellspacing="3">
        <tbody>
                <tr>
                        <td colspan="2" style="text-align:center; font-weight:bold;">COURSE</td>
                </tr>
                <tr>
                        <td><input type="checkbox" onClick="return toggle(this);" /></td>
                        <td><span style="color:blue;">Select All</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSIS"></td>
                        <td><span style="color:green;">BSIS</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSCE"></td>
                        <td><span style="color:orange;">BSCE</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSHRM"></td>
                        <td><span style="color:pink;">BSHRM</span></td>
                </tr>
                <tr>
                        <td><input type="checkbox" name="check_all" value="BSIT"></td>
                        <td><span style="color:red;">BSIT</span></td>
                </tr>
        </tbody>
</table>
 
</body>
</html>

So what can you say about this work? Share your thoughts in the comment section below. Practice Coding. Thank you.

Add new comment

17 views