zoukankan      html  css  js  c++  java
  • Reading CheckBoxes and Radio Buttons

     


    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 " ", or new line character. In this case the string is named message

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

    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:
    
    "
    
       //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 + "
    "
          }
    
       //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 + "
    " + 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>
    

  • 相关阅读:
    EF6学习笔记二十五:分布式事务
    EF6学习笔记二十四:事务
    EF6学习笔记二十三:拦截器异常、耗时监控
    EF6学习笔记二十二:初识NLog日志框架
    EF6学习笔记二十一:格式化日志输出
    EF6学习笔记二十:简单日志记录
    EF6学习笔记十九:不一样的复杂类型
    EF6学习笔记十八:DetectChanges
    EF6学习笔记十七:快照追踪与代理追踪性能测试
    EF6学习笔记十六:变更追踪
  • 原文地址:https://www.cnblogs.com/hannover/p/4210070.html
Copyright © 2011-2022 走看看