- 1). Open Notepad and copy the following HTML code to create a simple web form.
<html>
<head>
<title>Checkbox Demo</title>
<script language="javascript">
</script>
</head>
<body>
<form name="form1">
<input type="checkbox" name="ckBox" />
<label for="ckbox">Check here</label>
<br/><br/>
<input type="hidden" name="hiddenBox" value="" />
</form>
This code creates a simple web form with a checkbox and a hidden field. - 2). Save the file as checkBoxDemo.htm. In NotePad, click "File" then "Save As" from the pull-down menus. When the file save dialog appears, change the file type to "All Files" then enter checkBoxDemo.htm in the file name and click "Save".
- 3). Add a JavaScript function to update the hidden field when the check box gets clicked. Copy the following code between the start and end script tags:
<script language="javascript">
function ckBox_click() {
var ckBox = document.forms.form1.ckBox;
var hiddenBox = document.forms.form1.hiddenBox;
if (ckBox.checked == true)
hiddenBox.value = "Checked";
else
hiddenBox.value = "Not checked";
}
</script>
The function creates variables that represent the two input fields ckBox and hiddenBox. It then determines the state of the check box - true if checked, false if not checked - then sets the value of the hidden field to "Checked" or "Not Checcked" depending on the state of the check box. - 4). Ad an event handler to the checkbox that calls the new function ckBox_click when the checkbox gets clicked. Change the checkbox tag as follows:
<input type="checkbox" name="ckBox" onClick='ckBox_click();' />
The onClick event handler was selected because it fires any time the box gets clicked. The onChange event only fires in Internet Explorer when the check box gets checked, not when it gets cleared. - 5). Change the hidden input field to a text input field. This allows us to view the results of the JavaScript function.
<input type="text" name="hiddenBox" value="" /> - 6). Save the changes by clicking "File" then "Save".
- 7). Test the code. Open Internet Explorer or any JavaScript-enabled web browser then load the file. In Internet Explorer, click "File" then "Open" then click the "Browse" button and navigate to the checkBoxDemo.htm file. When the file loads, click the checkbox several times to observe how the text input field changes.
previous post
next post