1.3 单选按钮

简介:

1.3 单选按钮
1.3.1 基本形制
<input type="radio" name="choise" value="1"/>建设家乡<br/>
<input type="radio" name="choise" value="2"/>考公务员<br/>
<input type="radio" name="choise" value="3" checked="checked"/>闯北上广<br/>
<input type="radio" name="choise" value="4"/>出国深造<br/>
   
1.3.2 常用属性
1.3.2.1 类型type
type="radio"说明它是单选框。

1.3.2.2 名称name
单选按钮不会是一个而会是一组,同组的单选按钮以name归类,同名即是一组。
向后台传值的时候,name和选择项的value会传递过去,这就能知道用户选择了哪一项。

1.3.2.3 值value
它表示这一项的值

1.3.2.4 是否选中checked
表示该选项是否默认选中,一个组里应仅有一个选项这样设置。另外="checked"可以省略,如下面形式
<input type="radio" name="city" value="1" checked/>北京<br/>
<input type="radio" name="city" value="2"/>上海<br/>
<input type="radio" name="city" value="3"/>广州<br/>
<input type="radio" name="city" value="4"/>深圳<br/>

1.3.3 JS对单选按钮的操作
1.3.3.1 取值
按名字得到单选按钮数组后遍历,其checked属性为true的就是选中那个,没选中的checked属性都是false。
var arr=document.getElementsByName("choise");

for(var i=0;i<arr.length;i++){
    if(arr[i].checked==true){
        alert(arr[i].value);
    }
}

1.3.3.2 设值
按名字得到单选按钮数组后,对要选择的选项设置checked属性为true即可。
var arr=document.getElementsByName("choise");
arr[3].checked=true;

1.3.3.3 创建
以下代码创建了两个单选按钮,设置了属性,添加了附加文字,并把它们添加到一个名为myDiv的div里
var div=document.getElementById("myDiv");

var radio1=document.createElement("input");
radio1.type="radio";
radio1.name="city";
radio1.value="1";
radio1.checked=true;

div.appendChild(radio1);
div.appendChild(document.createTextNode("纽约"));
div.appendChild(document.createElement("br"));

var radio2=document.createElement("input");
radio2.type="radio";
radio2.name="city";
radio2.value="2";

div.appendChild(radio2);
div.appendChild(document.createTextNode("西雅图"));
div.appendChild(document.createElement("br"));

radio的变化比较简单,操作也不复杂。 

版权所有,转载请说明作者及出处。






本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/5710583.html,如需转载请自行联系原作者


相关文章
|
2月前
单选框
【10月更文挑战第1天】单选框。
28 4
|
2月前
|
大数据 云计算
复选框
【10月更文挑战第1天】复选框。
30 2
|
6月前
|
JavaScript 前端开发
详细解读checkbox的全选与反选
详细解读checkbox的全选与反选
64 0
复选框checkbox实现自定义样式
复选框checkbox实现自定义样式
67 1
layui的复选框怎么设置只能单选
layui的复选框怎么设置只能单选
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
|
XML Java API
按钮和复选框控件
按钮和复选框控件
90 0
|
Windows
Qt之单选按钮和复选按钮(QRadioButton、QCheckBox)
Qt之单选按钮和复选按钮(QRadioButton、QCheckBox)
373 0
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选