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的变化比较简单，操作也不复杂。 

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