radio与checkbox

最近一直在学习Javascript与asp.net MVC4,每天都在跟着书学习。这样总感觉自己看的很抽象,没有点实际的意义。而且,每次看的东西很容易忘记,所以打算在这里记录自己的学习笔记。

Javascript已经看了不少天了,本文主要讲述的是radio与checkbox。

1.radio

radio又称单选框,它是html表单中的单选按钮。通常单选按钮是成组出现的,是互斥的,每次只能选取一个。当点击按钮的时候,就会触发onclick事件。通过属性checked判断按钮是否被选中。声明的语法如下:<input type="radio">

2.checkbox

checkbox又称复选框,它是html表单中的一个选择框。通过checked属性判断是否被选中。声明语法如下:<input type="checkbox">

3.实例

这个例子是书本里的例子,一个简单的购买物品的例子。我只是自己搬出来让他实现了一般而已,直接上代码。

1        function checkAll() {
2             with (form1) {
3                 for (var i = 0; i < length; i++) {
4                     if (elements[i].type == "checkbox") {
5                         elements[i].checked = true;
6                     }
7                 }
8             }
9         }

这是全选代码,通过对document的form标签内的元素进行循环,设置每个checkbox的checked属性为true。

1    function checkIt(obj){
2             var index = obj.name.charAt(3);
3             eval("if(form1.check"+index+".checked==false)form1.check"+index+".checkded=true");
4 
5         }

这是单选代码,可以将选取的checkbox的checked设置为true。

 1  function mybuy() {
 2             with (form1) {
 3                 for (var i = 0; i < length; i++) {
 4                     if (elements[i].name == "radio1")
 5                         break;
 6                 }
 7                 for (var j = 0; j < 4; j++) {
 8                     if (elements[j].checked == true)
 9                         break;
10                 }
11                 switch (j) {
12                     case 0:
13                         var cardStr = "ViSA";
14                         break;
15                     case 1:
16                          cardStr = "建行";
17                         break;
18                     case 2:
19                         cardStr = "农业银行";
20                         break;
21                     default:
22                         cardStr = myradio4.value;
23                         break;
24                        
25                 }
26             }
27             newWin = open("", "", "width=500,height=500");
28             newWin.document.write("您使用的卡号是:" + form1.cardNumber.value + "的" + cardStr + "购买以下物品:<p>");
29             for (var i = 0; i < form1.length; i++) {
30                 if (form1.elements[i].type == "checkbox" && form1.elements[i].checked == true) {
31                     index = form1.elements[i].name.charAt(5);
32                     var num = eval("form1.num" + index + ".value");
33                     newWin.document.write(form1.elements[i].value+"&nbsp;&nbsp;"+num+"件<p>");
34                 }
35             }
36         }

这里通过radio选择银行,首先找到第一个radio,然后确定被选择的radio的索引,最后获取该radio的name。并将购买的信息在新窗口中进行显示。

 1  <form id="form1" runat="server">
 2     <div>
 3     <h2 align="center">产品列表</h2>
 4     <table>
 5     <tr>
 6     <td><input type="checkbox" name="check1" id="mycheck1" value="产品A" /><label for="mycheck1">&nbsp;&nbsp;</label></td>
 7     <td>数量:<input size=2 name="num1" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>
 8     <td>&nbsp;&nbsp;产品A</td>
 9     </tr>
10        <tr>
11     <td><input type="checkbox" name="check2" id="mycheck2" value="产品A" /><label for="mycheck2">&nbsp;&nbsp;</label></td>
12     <td>数量:<input size=2 name="num2" value="2" onfocus="this.select()" onchange="checkIt(this);" /></td>
13     <td>&nbsp;&nbsp;产品B</td>
14     </tr>
15        <tr>
16     <td><input type="checkbox" name="check3" id="mycheck3" value="产品A" /><label for="mycheck3">&nbsp;&nbsp;</label></td>
17     <td>数量:<input size=2 name="num3" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>
18     <td>&nbsp;&nbsp;产品C</td>
19     </tr>
20     <tr>
21     <td><input type="button" name="allcheck" value="全选" onclick="checkAll();" /></td>
22     </tr>
23     <tr>
24     <td><input type="reset" value="重选" /></td>
25     </tr>
26     </table>
27     <h3>请选择您的信用卡类型</h3>
28     <input type="radio" name="radio1" id="myradio1" checked="checked" /><label for="myradio1">Visa</label>
29      <input type="radio" name="radio1" id="myradio2" /><label for="myradio2">建行</label>
30       <input type="radio" name="radio1" id="myradio3" /><label for="myradio3">农业银行</label>
31        <input type="radio" name="radio1" id="myradio4" /><label for="myradio4">其他</label>
32        <input name="mycard" />
33        <p>请输入您的信用卡号:<input name="cardNumber" /></p>
34     </div>
35     <div>
36     <input type="submit" value="购买" onclick="mybuy();"/>
37     </div>
38     </form>

这里是Html代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

echarts - 特殊需求实现代码汇总之【饼图】篇

其实很简单,就是设置全局的color属性即可。color属性可以是一套数组,里边的样式以字符串格式设置。

24110
来自专栏lonelydawn的前端猿区

h5小游戏——HitRocket

一.游戏介绍 游戏介绍: 不断有携带字母炸弹的火箭撞向地面,请根据火箭身上的字母敲击键盘,每一次对应的敲击会击落携带该字母的火箭并使得分加一,每一架火箭撞到地...

268100
来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(上)

前言 在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年我还在想,假如有一天,前端世界里...

406120
来自专栏walterlv - 吕毅的博客

Visual->UIElement->FrameworkElement,带来更多功能的同时也带来了更多的限制

发布于 2017-11-13 15:55 更新于 2018-02...

8630
来自专栏MelonTeam专栏

小白看React Native

1.What is React Native ? 众所周知,产品的需求总是想快速的迭代。但是由于应用分发市场的审核机制(主要是iOS审核),使一些快速迭代的...

91880
来自专栏编程微刊

markdown模式的一些语法标题一

14110
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

12430
来自专栏菜鸟计划

CSS布局(四) float详解

一、float设计初衷 因为float被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片float:left之后,文字会环绕图片。 <d...

41980
来自专栏web编程技术分享

《从案例中学习JavaScript》之实现对话效果(2)-- 附超简单函数封装技巧

33760
来自专栏数据小魔方

Xcelsius(水晶易表)系列7——多选择器交互用法

今天继续跟大家讲解水晶易表动态仪表盘的高级用法——多选择器交互用法。 关于选择器的用法,之前的几篇零零碎碎的讲了些,今天是专门讲解水晶易表中几种重要的选择器用法...

36360

扫码关注云+社区

领取腾讯云代金券