How to select and unselect checkbox using Java script
In this article I have explained about how to select and unselect checkbox values
using Java script
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>