Input tags with the type attribute checkbox can be grouped like radio buttons so that several checkboxes have the same name. However, any number of checkboxes can be selected by the user. Working with checkboxes in JavaScript is similar to but not exactly the same as working with radio buttons. Here is a short example that demonstrates getting values from checkboxes and radio buttons in the same form:


Music Survey

I enjoy: Classical Chamber Jazz Rock Punk
Favourite Performer:
Aitken Coltrane Julliard Kronos Waits

Getting all the values

A series of checkboxes with the same name are reflected as an array of checkbox objects. In this example each check box input tag is named Music but has a different value. Since there are identically named input tags of the same type, an array of checkbox objects named Music is created. When the button in this form is pressed, it passes a reference to the form to a function named, in this case, showBoxes(frm). The function loops through the checkbox array within the form. To access the check box array from the form reference it is only necessary to append the name of the checkboxes to the form reference:

frm.Music

For example to access the number of elements in the array:

frm.Music.length

or if the variable i contains the index of one of the elements, here is how you would check to see if that element had been checked:

if (frm.Music[i].checked)

or get that element's value:

frm.Music[i].value

Since many values may be checked, this example gathers the values from each by appending each value on to the end of a string. Since the string is eventually displayed in an alert dialog each value is separated by a "\n", or new line character. In this case the string is named message

message = message + frm.Music[i].value + "\n"

Here is the complete page:

<HTML>
<HEAD>
<TITLE>JavaScript - Reading Checkboxes and Radio Buttons</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showBoxes(frm){
var message = "Your chose:\n\n" //For each checkbox see if it has been checked, record the value.
for (i = 0; i < frm.Music.length; i++)
if (frm.Music[i].checked){
message = message + frm.Music[i].value + "\n"
} //For each radio button if it is checked get the value and break.
for (var i = 0; i < frm.Performer.length; i++){
if (frm.Performer[i].checked){
message = message + "\n" + frm.Performer[i].value
break
}
}
alert(message)
} //NOTE THE onClick="" empty event handlers in the checkbox and radio input fields below
//are there to fix a bug in Netscape 2.0X. Placing an onClick handler in imput fields fixes
//a bug where input objects inside tables are reflected more than once. //-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="boxes">
<HR size=1 noshade>
<h2>Music Survey </h2>
<TABLE BORDER="1" CellSpacing="0" CellPadding="6">
<TR>
<TD align="right">I enjoy:</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Classical" onClick="" CHECKED>Classical</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Chamber" onClick="">Chamber</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Jazz" onClick="" CHECKED>Jazz</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Rock" onClick="">Rock</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Punk" onClick="">Punk</TD>
</TR>
<TR>
<TD><div align="right">Favourite Performer:</div></TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Aitken" onClick="">Aitken</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Coltrane" onClick="" CHECKED>Coltrane</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Julliard" onClick="">Julliard</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Kronos" onClick="">Kronos</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Waits" onClick="">Waits</TD>
</TR>
</TABLE>
<P>
<INPUT TYPE="Button" VALUE="Tell Us What You Like!" onClick="showBoxes(this.form)">
</P>
</FORM>
</BODY>
</HTML>

随机推荐

  1. Oracle EBS - AOL

    AOL: (Path: /u43/dev6/interface/aol) 1. Goto system administrator response 2. View -> Request (Sa ...

  2. 关于Storyboard的使用

    前言:说起来码龄很久似的,但是还是有很多基础的知识都不知道,比如下面介绍的关于Stroyboard的使用.(本篇博文随笔会不断补充关于Storyboard的使用技巧,持续更新) 目录: 1.使用Str ...

  3. apt-get常见错误——Unmet dependencies

    转自:http://blog.sina.com.cn/s/blog_4980828b0100zicn.html 安装错误:“E: Unmet dependencies.”原因:非正常停止apt-get ...

  4. 通过JDBC进行简单的增删改查(二)

    本章笔记更易理解和学习,也是我第一次初学的笔记. package javastudy; import java.sql.Connection; import java.sql.DriverManage ...

  5. UVa 11481 (计数) Arrange the Numbers

    居然没有往错排公式那去想,真是太弱了. 先在前m个数中挑出k个位置不变的数,有C(m, k)种方案,然后枚举后面n-m个位置不变的数的个数i,剩下的n-k-i个数就是错排了. 所以这里要递推一个组合数 ...

  6. SelectList

    SelectList 构造函数 (IEnumerable, String, String, Object) 使用列表的指定项.数据值字段.数据文本字段和选定的值来初始化 SelectList 类的新实 ...

  7. ng7 设置文件路径别名

    /tsconfig.json 配置后重启服务 { "compileOnSave": false, "compilerOptions": { "base ...

  8. Azure VMs

    Azure VMs provide a way to move your on-premises SQL Server workloads and applications to the Cloud. ...

  9. (五)bootloader 启动 ucore os

    Lab1 : bootloader 启动 ucore os 一.内容提要 x86启动顺序 C函数调用 gcc内联汇编(inline assembly) x86-32下的中断处理 小结 二.x86启动顺 ...

  10. CriticalSection 临界区

    // 临界区.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h"#include<windows.h>#include<iost ...