radio与checkbox
2024-08-27 09:36:19
最近一直在学习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.实例
这个例子是书本里的例子,一个简单的购买物品的例子。我只是自己搬出来让他实现了一般而已,直接上代码。
function checkAll() {
with (form1) {
for (var i = 0; i < length; i++) {
if (elements[i].type == "checkbox") {
elements[i].checked = true;
}
}
}
}
全选
这是全选代码,通过对document的form标签内的元素进行循环,设置每个checkbox的checked属性为true。
function checkIt(obj){
var index = obj.name.charAt(3);
eval("if(form1.check"+index+".checked==false)form1.check"+index+".checkded=true"); }
单选
这是单选代码,可以将选取的checkbox的checked设置为true。
function mybuy() {
with (form1) {
for (var i = 0; i < length; i++) {
if (elements[i].name == "radio1")
break;
}
for (var j = 0; j < 4; j++) {
if (elements[j].checked == true)
break;
}
switch (j) {
case 0:
var cardStr = "ViSA";
break;
case 1:
cardStr = "建行";
break;
case 2:
cardStr = "农业银行";
break;
default:
cardStr = myradio4.value;
break; }
}
newWin = open("", "", "width=500,height=500");
newWin.document.write("您使用的卡号是:" + form1.cardNumber.value + "的" + cardStr + "购买以下物品:<p>");
for (var i = 0; i < form1.length; i++) {
if (form1.elements[i].type == "checkbox" && form1.elements[i].checked == true) {
index = form1.elements[i].name.charAt(5);
var num = eval("form1.num" + index + ".value");
newWin.document.write(form1.elements[i].value+" "+num+"件<p>");
}
}
}
购买
这里通过radio选择银行,首先找到第一个radio,然后确定被选择的radio的索引,最后获取该radio的name。并将购买的信息在新窗口中进行显示。
<form id="form1" runat="server">
<div>
<h2 align="center">产品列表</h2>
<table>
<tr>
<td><input type="checkbox" name="check1" id="mycheck1" value="产品A" /><label for="mycheck1"> </label></td>
<td>数量:<input size=2 name="num1" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>
<td> 产品A</td>
</tr>
<tr>
<td><input type="checkbox" name="check2" id="mycheck2" value="产品A" /><label for="mycheck2"> </label></td>
<td>数量:<input size=2 name="num2" value="2" onfocus="this.select()" onchange="checkIt(this);" /></td>
<td> 产品B</td>
</tr>
<tr>
<td><input type="checkbox" name="check3" id="mycheck3" value="产品A" /><label for="mycheck3"> </label></td>
<td>数量:<input size=2 name="num3" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>
<td> 产品C</td>
</tr>
<tr>
<td><input type="button" name="allcheck" value="全选" onclick="checkAll();" /></td>
</tr>
<tr>
<td><input type="reset" value="重选" /></td>
</tr>
</table>
<h3>请选择您的信用卡类型</h3>
<input type="radio" name="radio1" id="myradio1" checked="checked" /><label for="myradio1">Visa</label>
<input type="radio" name="radio1" id="myradio2" /><label for="myradio2">建行</label>
<input type="radio" name="radio1" id="myradio3" /><label for="myradio3">农业银行</label>
<input type="radio" name="radio1" id="myradio4" /><label for="myradio4">其他</label>
<input name="mycard" />
<p>请输入您的信用卡号:<input name="cardNumber" /></p>
</div>
<div>
<input type="submit" value="购买" onclick="mybuy();"/>
</div>
</form>
HTml
这里是Html代码。
最新文章
- hive 内部表和外部表的区别和理解
- FreeBSD_11-系统管理——{Part_3-网络}
- linux用户、组管理及权限(一)
- JS判断对象类型
- CSAPP(2):程序的汇编表示(Linux版)
- Keil c51现No Browse information available
- 3.AOP入门1
- IOS — 关于Socket传输文件需要自定义延时或者包大小的情况
- Android网络:开发浏览器(五)——功能完善之保存图片实现
- Maven学习笔记(十一年):柔性结构
- 基于jQuery封装的分页组件
- insert into TABLE by SELECT ...
- nginx 1.4.3能直接升到1.8.1吗
- jar 包启动
- Ubuntu12.04安装并配置Sublime Text 2
- Java基础知识:Java实现Map集合二级联动3
- class __init__()
- 转 rac中并行 PARALLEL 的设置
- 找出数字数组中最大的元素(使用Math.max函数)
- Spring入门第三课
热门文章
- 一种基于Qt的可伸缩的全异步C/S架构server实现(二) 网络传输
- &;lt;源代码&;gt;FTPclient追加方式上传自己定义信息
- mysql-5.6.27源码安装及错误解决办法
- Android平台抓取native crash log
- JQ 操作样式,背景切换
- [Linked List]Reorder List
- Hadoop配置文件-hdfs-site.xml
- HTML5 Web存储(Web Storage)技术及用法
- python运维开发(十五)----JavaScript
- 初学swift笔记 方法(九)