checkbox （ 复选框 ） radio （单选框 ）剖析

  写在前面：

     单选框叫radio 复选框叫checkbox  区别就是单选框的选项是互斥的，也就是说你只能选一个选项类似於单选题。同理复选框类似多选题想怎么选就怎么选。

     基本的使用方法是这样的：单选框和复选框通常都是成组出现，一般一组的nama都设置成相同的为了取值方便。如下所示：

单选框

 

<input type="Radio" name="number_type"  value="SIM" checked>SIM
<input type="Radio" name="number_type" value="UIM">UIM

多选框

 

<input type="checkbox" name="price" id ="A" value="ON" >开户费
<input type="chepricex" name="price" id="B" value="ON">漫游费
<input type="checkbox" name="price" id="C" value="ON">押金
<input type="checkbox" name="price" id="D" value="ON" />入网费
 <input type="checkbox" name="price"  id="E" value="ON" >选号费

 

常用属性简介：

type =radio/checkbox  用来设置单选还是多选

name  通常设为相同以便javascript dom的document.getElementsByName（"name"）

方法调用，注意 getElementsByName返回的是数组对象 x[] 可以方便的用x.length来进行遍历

  如下:

 

var test = document.getElementsByName("test");
for(var i=9; i<test.length; i+=1){
      在循环里做爱做的事;
}

id 就是id咯....id基本上用不到

value  提交给表单的值  被选中的提交value 没被选中的 的就不提交

在后台的取值checkbox 和radio 是不同地。 radio是单选所以只返回一个值

在后台用  

String x =request.getParameter("Radio_name");

即可。

checkbox 返回的是被选中的值的数组  String [] 所以后台要这样写

 

String [] x = request.getParameterValues("checkboxName");
 for(String tmp :x)
 {
     System.out.println(tmp);
 }

基本上就这些了

 

然后提供一些javascript小脚本 

 

检测一组checkbox是否被选中

 

var btn = document.getElementById("btn");
var test = document.getElementsByName("test");
btn.onclick = function(){
for(var i=1; i<=test.length; i+=1){
if(test[i-1].checked){
alert("当前有选中！");
return;
}
}
alert("一个也没有选！");
};

反选与全选

 

var btn = document.getElementById("btn");
var test = document.getElementsByName("test");
btn.onclick = function(){
    for(var i=1; i<=test.length; i+=1){
        if(test[i-1].checked){
            test[i-1].checked = false;
        }else{
            test[i-1].checked = true;
        }
    }
};

 

 

综上所述，说下最后一个属性checked  true/false  通过上面代码你该发现了，checkbox/radio  就是一个对象数组，选没选上通过checked操纵提交的值通过value操纵。

           如果还是操纵不了的话还需多加努力哦亲！