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操縱。

           如果還是操縱不了的話還需多加努力哦親！