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. Bias(偏差)，Error(误差)，和Variance(方差)的区别和联系

    准: bias描述的是根据样本拟合出的模型的输出预测结果的期望与样本真实结果的差距,简单讲,就是在样本上拟合的好不好.要想在bias上表现好,low bias,就得复杂化模型,增加模型的参数,但这样容 ...

  2. SQL Server 数据库项目

    ylbtech-.NET Framework: SQL Server 数据库项目 SQL Server 数据库项目 类型:SQL Server 用于创建 SQL Server 数据库的项目 1. 新建 ...

  3. 聊聊jdbc statement的fetchSize

    在使用MySQL的JDBC时,如果查询结果集过大,使用一次查询,可能会出现Java.lang.OutOfMemoryError: Java heap space问题,因为DB服务器端一次将查询到的结果 ...

  4. solr建立pdf/word/excel索引的方法

    PS: 本文假设你已经成功的搭建了一个Solr服务器步骤如下:(1)准备好一份Solr的源码,假设现在保存在c:\apache-solr-1.4.1\目录下(2)从https://issues.apa ...

  5. Lucene学习——IKAnalyzer中文分词

    一.环境 1.平台:MyEclipse8.5/JDK1.5 2.开源框架:Lucene3.6.1/IKAnalyzer2012 3.目的:测试IKAnalyzer的分词效果 二.开发调试 1.下载框架 ...

  6. [Math]理解卡尔曼滤波器 (Understanding Kalman Filter) zz

    1. 卡尔曼滤波器介绍 卡尔曼滤波器的介绍, 见 Wiki 这篇文章主要是翻译了 Understanding the Basis of the Kalman Filter Via a Simple a ...

  7. 知乎：GAN 的发展对于研究通用人工智能有什么意义？

    https://www.zhihu.com/question/57668112/answer/155367561 Lyken 愿以有涯随无涯 收录于 编辑推荐知乎圆桌 · 296 人赞同了该回答 资历 ...

  8. 技能｜三次简化一张图：一招理解LSTM/GRU门控机制

    作者 | 张皓 引言 RNN是深度学习中用于处理时序数据的关键技术, 目前已在自然语言处理, 语音识别, 视频识别等领域取得重要突破, 然而梯度消失现象制约着RNN的实际应用.LSTM和GRU是两种目 ...

  9. 利用NATAPP隧道解决微信公众号开发之本地调试难题

    一.问题 众所周知,微信公众号开发需要公网的有效域名和80端口,本机当然互联网是访问不了的.那么我们难道去一个公网的服务器去开发吗?那样是不是太土了. 答案当然是,NO 当然我们在做微信支付的时候,有 ...

  10. 数据驱动测试二：使用TestNG和CSV文件进行数据驱动

    转载:https://blog.csdn.net/heart_1014/article/details/52013173 使用@DataProvider注解定义当前方法中的返回对象CSV文件(存放测试 ...