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. 使用ASP.NET读取word2003文档

    直接使用.NET 读取doc文档. http://www.codeproject.com/Articles/22738/Read-Document-Text-Directly-from-Microso ...

  2. C#多线程写日志

    由于程序是3层架构的,所有多线程记录日志成了比较棘手的问题,以前还真就没有在意过写日志的问题,认为不过是写文件罢了~~!如今发现原来要实现文件共享,并且能够使多线程同时操作日志还不能相互冲突,真的很麻 ...

  3. go语言之进阶篇通过select实现斐波那契数列

    一.select作用 Go里面提供了一个关键字select,通过select可以监听channel上的数据流动. select的用法与switch语言非常类似,由select开始一个新的选择块,每个选 ...

  4. B/S架构中常用弹出方法 (转）

    <一> 在B/S架构的项目中,为了提高项目的易用性,增强系统与用户的交互功能,一般使用弹出页面来为用户提供操作或数据选择帮助信息,比如,用户输入一个编码中某些字符,在弹出页面中显示所有包含 ...

  5. SharePoint 2016 IT Preview的新feature列表

    大致看了一下, 其中关于存储的部分貌似没有. 感觉Hybrid in SharePoint 2016未来可以做的事情比较多吧, 必须赶紧弄个cloud的东西开始玩玩了. Search的部署的更新, 以 ...

  6. 【Spark】SparkStreaming-提交到集群运行

    SparkStreaming-提交到集群运行 spark streaming 提交_百度搜索 SparkStreaming示例在集群中运行 - CSDN博客

  7. 转：ubuntu 下GPU版的 tensorflow / keras的环境搭建

    http://blog.csdn.net/jerr__y/article/details/53695567 前言:本文主要介绍如何在 ubuntu 系统中配置 GPU 版本的 tensorflow 环 ...

  8. [Angular] Communicate with Angular Elements using Inputs and Events

    In a real world scenario we obviously need to be able to communicate with an Angular Element embedde ...

  9. android中使用toolbar

    系统默认使用的是ActionBar,就是界面中的标题栏,但是由于ActionBar设计的原因,被限定只能位于活动的顶部,从而不能实现Material Design效果,所以官方建议使用Toolbar替 ...

  10. cocos2d-x在IOS7下面文字显示异常的解决办法 CGBitmapContextCreate: unsupported parameter combination

    首先定位到libs-->cocos2dx-->platform-->iOS-->CCImage.mm 找到这个文件. 打开CCImage.mm文件,定位到如下函数:   [cp ...