1.4 复选按钮

1.4 复选按钮
1.4.1 基本形制
<input type="checkbox" name="fruit" value="1">西瓜<br/>
<input type="checkbox" name="fruit" value="2" checked="checked">油桃<br/>
<input type="checkbox" name="fruit" value="3">李子<br/>
<input type="checkbox" name="fruit" value="4" checked>梨子<br/>
    
1.4.2 常用属性
1.4.2.1 类型type
type="checkbox"表示为复选框

1.4.2.2 名称name
同组的复选框都有一个名称，传递到后台时，后台会得到选中的复选框的数组。

1.4.2.3 值value
值表示选项的真实内容，它不等同于显示的界面文字。

1.4.2.4 是否选中checked
表示该选项是否默认选中，一个组里有多个项可以这样设置。另外="checked"可以省略，

1.4.3 JS对复选按钮的操作
1.4.3.1 取复选框中选中项的值
var arr=document.getElementsByName("fruit");

for(var i=0;i<arr.length;i++){
    if(arr[i].checked==true){
        alert("第"+(i+1)+"项被选中了，其值为"+arr[i].value);
    }
}

1.4.3.2 设置复选框的选中项
var arr=document.getElementsByName("fruit");
arr[0].checked=true;
arr[1].checked=true;
arr[2].checked=true;
arr[3].checked=false;

1.4.3.3 创建复选框
var div=document.getElementById("myDiv");

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

div.appendChild(chk1);
div.appendChild(document.createTextNode("北京"));
div.appendChild(document.createElement("br"));

var chk2=document.createElement("input");
chk2.type="checkbox";
chk2.name="city";
chk2.value=1;
chk2.checked=false;

div.appendChild(chk2);
div.appendChild(document.createTextNode("上海"));
div.appendChild(document.createElement("br"));

1.4.3.4 全选与反选
当页面中的复选框较多时，常使用一个单独复选框对整体复选框进行全选/反选操作，如页面有有一个名为selAll的复选框，
<input type="checkbox" name="selAll" onclick="selectAll()">全选    
让它来控制名为fruit的复选框组的全选，代码如下：
function selectAll(){
    var checked=document.getElementsByName("selAll")[0].checked;
    var arr=document.getElementsByName("fruit");

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

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

2016年7月29日15:34:47