How to select and unselect checkbox using Java script Samples and examples

In this article I have explained about how to select and unselect checkbox values
using Java script. Just drag and drop two button control and checkbox control.
In button click event just call ChangecheckboxStateToTrue() to make all checkbox to true.
In another button click event just call ChangecheckboxStateToFalse() to make all checkbox to false.


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    
    <script type="text/javascript">
function ChangecheckboxStateToTrue(frmname)
{
 
 var totalcheckvalus= document.getElementById(frmname);
 for (var i =0; i < totalcheckvalus.elements.length; i++)
 {
 totalcheckvalus.elements[i].checked=true;
 }
}

function ChangecheckboxStateToFalse(frmname)
{
 
 var totalcheckvalus= document.getElementById(frmname);
 for (var i =0; i < totalcheckvalus.elements.length; i++)
 {
 totalcheckvalus.elements[i].checked=false;
 }
}
</script>


</head>
<body>
    <form id="form1" runat="server">
    <div id="div1" style="text-align: left">
        <strong> Select and Select All Checkbox using
            Java script</strong><table>
                <tr>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox1" runat="server" /></td>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox4" runat="server" /></td>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox7" runat="server" /></td>
                </tr>
                <tr>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox2" runat="server" /></td>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox8" runat="server" /></td>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox6" runat="server" /></td>
                </tr>
                <tr>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox3" runat="server" /></td>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox9" runat="server" /></td>
                    <td style="width: 100px">
        <asp:CheckBox ID="CheckBox5" runat="server" /></td>
                </tr>
            </table>
    </div>
        <asp:Button ID="Button1" OnClientClick ="ChangecheckboxStateToTrue('form1')"  runat="server" Text="Select All" />
        <asp:Button ID="Button2" OnClientClick ="ChangecheckboxStateToFalse('form1')"  runat="server" Text="De Select All" />
    </form>
</body>
</html>

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.