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>

Reading CheckBoxes and Radio Buttons的更多相关文章

  1. playwright-python 处理Text input、Checkboxs 和 radio buttons（三）

    Text input 输入框输入元素,直接用fill方法即可,支持 <input>,<textarea>, [contenteditable] 和<label>这些 ...

  2. [Angular2 Form] Create Radio Buttons for Angular 2 Forms

    Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels ...

  3. JSF 2 radio buttons example

    In JSF, "h:selectOneRadio" tag is used to render a set of HTML input element of type " ...

  4. mfc Radio Buttons

    添加单选按钮 关联变量 调试宏TRACE BOOL类型 一.添加一组单选按钮 二.添加第二组单选按钮 三.关联变量 四.单选按钮运用 void CMY_Dialog::OnBnClickedButto ...

  5. （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

    https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...

  6. selenium docs

    Note to the Reader - Docs Being Revised for Selenium 2.0! Introduction Test Automation for Web Appli ...

  7. ASP.NET MVC异步上传文件

    自己做的一个小dome.贴出来分享一下: 前端: <form id="formfile" method="post" enctype="mult ...

  8. Asp.net DropDownList 自定义样式(想怎么改就怎么改！)

    最近在做一个asp.net的项目,需要对默认的dropdownlist样式进行美化,固有的dropdownlist的小箭头实在让人无法接受,于是开始在百度,google 上下求索,天不负有心人,终于找 ...

  9. Ajax.BeginForm 上传文件

    在 Mvc 中上传文件时通常使用 Html.BeginForm 标签,同时对Form 添加属性 enctype = "multipart/form-data",前端代码如下: @H ...

随机推荐

  1. Java命令学习系列（七）——javap

    javap是jdk自带的一个工具,可以对代码反编译,也可以查看java编译器生成的字节码. 一般情况下,很少有人使用javap对class文件进行反编译,因为有很多成熟的反编译工具可以使用,比如jad ...

  2. 利用ASP.NET运行数据库的安装脚本

    在启明星的演示站点里,经常有用户修改演示密码,导致别的用户无法访问. 为此,在登陆页面,增加了一个“初始化数据库”功能,这样,即使用户修改了密码,别的访问者,只要重置数据库,就可以很容易再次进入. 首 ...

  3. protobuf 语法简介

    protobuf 语法简介 1.基本语义 在.proto文件中,最基本的数据类型为message,如其定义所示,由message引导,之后是message类型的名字,之后是由{}包含的各个域(fiel ...

  4. c++实现Xml和json互转【转】

    https://blog.csdn.net/kfy2011/article/details/51774242 1.下载c语言的cJson库源码,库很小,只有两个文件cJSON.c和cJSON.h.下载 ...

  5. springboot下配置多数据源

    摘自: http://blog.csdn.net/wangqingqi20005/article/details/52613055

  6. 转：Parameter Server 详解

    Parameter Server 详解   本博客仅为作者记录笔记之用,不免有很多细节不对之处. 还望各位看官能够见谅,欢迎批评指正. 更多相关博客请猛戳:http://blog.csdn.net/c ...

  7. CRF分词的纯Java实现

    与基于隐马尔可夫模型的最短路径分词.N-最短路径分词相比,基于随机条件场(CRF)的分词对未登录词有更好的支持.本文(HanLP)使用纯Java实现CRF模型的读取与维特比后向解码,内部特征函数采用  ...

  8. JAVA-错误The type BookServiceImpl must implement the inherited abstract method

    错误原因 :是因为class继承了其他的类,没有导入过来,选择add unimplemented methods进行解决

  9. Pandas Series笔记

    1.指向单元素的,类型为元素的类型 2.指向多个元素的,类型为Series 3.如果用索引切片,索引是非整型的,实际按照索引顺序取值,且包含末端 4.如果指定的索引不存在,则会报错 5.可以根据元素的 ...

  10. linux mount

    挂载       mount //10.65.200.168/linux_bj /home/linux_bj -t cifs -o username=niu,password=ruanxiaopang ...