js動態獲取子複選項並設計全選及提交

 在作項目的時候，會遇到根據父選項，動態的獲取子選項，並列出多個複選框，提交時，把選中的合併成一個字符提交後臺

本章將講述如何經過js控制實現該操做：

1：設計父類別爲radio，爲每個radio都加上onclick事件，並默認類別1爲選擇狀態。

<input type="checkbox" name="selectall" id="selectall" onClick="selectAll();" checked="checked"/>全選<br>
<input type="radio" name="lb" id="lb" value="1" onclick="getZlb(1);" checked="checked"/>類別1 
<input type="radio" name="lb" id="lb" value="2" onclick="getZlb(2);"/>類別2 
<input type="radio" name="lb" id="lb" value="3" onclick="getZlb(3);"/>類別3

2：頁面初加載時，要根據選中的父類別顯示子類別，在點擊按鈕時，也要獲取子類別，故寫成同一個方法，並在頁面加載結束後調用

window.onload=getZlb();

3：獲取子類別的js方法，經過ajax方法動態獲取後臺數據

/**
 * 獲取子類別，在頁面加載結束後也執行顯示
 */
  function getZlb(){
    //經過名字獲取
    var obj = document.getElementsByName("lb");
        for(var i=0; i<obj.length; i ++){
            if(obj[i].checked){
                getZlbNews(obj[i].value);
            }
    }
  }

function getZlbNews(){
       (經過Ajax獲取map類型的數據;返回數據爲result,json格式)
       var json = eval("("+result+")");  //轉化爲json對象
        //經過ID獲取子類型要顯示的區域
       var parent=document.getElementById('xsqy');
       //把子區域置空，防止下次追加
       parent.innerHTML='';
       var p=0;
       var span="";
       //把全選打上勾
       document.getElementById("selectall").checked=true;
       for(var i in json){
         p++;
         span="<SPAN style=\"display:inline-block; width: 75px;\"><input type=\"checkbox\" checked=\"checked\" onClick=\"checkSelectAll();\" name=\"zlb\" value=\""+i+"\">"+json[i]+"</SPAN>";
         //當子複選框超過11個，則換行
         if(p%11==0){
             span=span+"<br>";
         }
         //把子複選框一個個追加到子區域
         parent.innerHTML=parent.innerHTML+span;
       } 
}        

4:後臺邏輯，

　　/**
     * 經過子類別，返回Map格式 Map<代碼，名稱>
     * @return
     */
    public String getZLb(){
        Map<Integer, String> zlb=service.getZLB();
        //把map轉化爲json格式
        JSON a= JSONSerializer.toJSON(zlb);
        return a.toString();
    }

5：js控制全選，及全選是否選中的邏輯，及提交時如何合併選中的代碼

/**
   * 全選或是所有取消
   */
  function selectAllDz(){
      var checkboxs = document.getElementsByName("zlb");
      for(var i=0; i<checkboxs.length; i++) {
　　　　　　//根據全選的按鈕是否選中來控制子類別是否選中
          checkboxs[i].checked = document.getElementById("selectall").checked;
      }
  }
/**
 * 判斷子類別是否全選，是全選則全選按鈕選中，不然不選中
 */
  function checkSelectAll(){
      var checkboxs = document.getElementsByName("zlb");
      var isSelectAll=true;
      for(var i=0; i<checkboxs.length; i++) {
          if(checkboxs[i].checked ==false){
              isSelectAll=false;
          }
      }
      if(isSelectAll==false){
          document.getElementById("selectall").checked=false;
      }else{
          document.getElementById("selectall").checked=true;
      }
  }
/**
* 拼接選中的ID，以逗號分隔
**/
function getAllIdStr(checkName){
    var select = document.getElementsByName(checkName);
     var idStr = new Array();
     for(var i=0; i<select.length; i++){
         if(select[i].checked==true){
             idStr = idStr.concat(select[i].value);
         }
     }
     return idStr.join(',');
}

 6:在進行下一步操做時，如提交時，把全選的變成一個字符，賦值給一個隱藏的文本框，用來提交到後臺

//調用拼接ID的方法，把要操做的元素名字傳過去
var allZlb=getAllIdStr('zlb');
//建立一個隱藏的文本框，把拼接後的賦之，用於後臺獲取
document.getElementById('allZlbStr').value=allZlb;

 

以上只是我的拙見，若有更好的處理建議，請告知

over