[GIIS]CheckBoxList 之 Select All

在GIIS项目中有一个很帅的需求，先看截图：

需求：(下面的功能用JS实现)
1、点击Select All CheckBox, 如果Checked = true, 则下面的CheckBoxList要全部选中，并且Default Value的DropDownList中添加下面CheckBoxList的所有Item, 否则，如果Checked = false, CheckBoxList全部不选，DropDownList清空所有Item。
2、点选CheckBoxList的Item, 如果是选中的，就往DropDownList中添加这个Item并选中，如果是不选中，就从DropDownList删除这个Item, 并且要根据CheckBoxList是否全部选中来决定Select All的选中状态。

解决方法：
因为在前台用JS读不到CheckBoxList每个Item的Value和Text, 所以后台给CheckBoxList添加ListValue和ListText两个属性，把所有Item的Value和Text聚合起来，然后在前台读取。每次点击CheckBoxList的一个Item，都循环把所有Item的选中状态按0、1标志，存入一个变量，最后再根据这个标志来决定DropDownList应该添加那些Item。具体请看代码和注释，有更好的解决方法请大家不吝赐教哦。

前台代码：

<BenQ:QDropDownList ID = "QDropDownListDefaultValue" runat = "server" IsShowDefault = "false" Width = "150px"></BenQ:QDropDownList>

 <input id = "CheckAll" type = "checkbox" onclick = "checkAll(this)" runat = "server" value = "Select All"/> 

 <asp:CheckBoxList  ID="QCheckBoxListAttributeValue" runat="server" RepeatDirection="Horizontal" RepeatLayout ="flow"> </asp:CheckBoxList>

JS代码：

<script type = "text/javascript">
 function checkAll(obj)
 { 
    var matchInfo = /^.*?\d+_/;  //用于匹配Repeater中Web控件的客户端ID，比如Repeater1_ct1_

    var matchObjID =  obj.id.match(matchInfo);    
    var halfClientID = matchObjID[0]; 
    var checkBoxItemID = halfClientID + "QCheckBoxListAttributeValue";
    var dropDownListID  = halfClientID + "QDropDownListDefaultValue";
    var checkBoxList = document.getElementsByTagName("input");
    var arrListValue = document.getElementById(checkBoxItemID).ListValue.split(','); //得到后台添加的ListValue属性值
    var arrListText = document.getElementById(checkBoxItemID).ListText.split(','); //得到后台添加的ListTest属性值
    var count = arrListValue.length;
   document.getElementById(dropDownListID).innerText = "";  //先清空DropDownList

      //根据Select All的选中状态，循环处理CheckBoxList的每个Item
    for (var i=0; i< checkBoxList.length; i++) 
    { 
        if (checkBoxList[i].id.indexOf(checkBoxItemID) >= 0)
        { 
            checkBoxList[i].checked = obj.checked;            
        } 
   } 

      //根据Select All的选中状态，循环把后台添加的ListValue和ListText属性添加给DropDownList

    if(obj.checked)
    {
         for(var j = 0; j < count; j++)
         {
             var tOption = document.createElement("Option");
             tOption.text=arrListText[j];       
             tOption.value=arrListValue[j];
             document.all(dropDownListID).add(tOption);
         }
    }
    else
    {
        document.getElementById(dropDownListID).innerText = ""; //清空DropDownList的所有Item
   }
}

 function checkSingle(checkBoxID, checkValue)
 { 
    var matchInfo = /^.*?\d+_/;
    var matchObjID =  checkBoxID.id.match(matchInfo);    
    var halfClientID = matchObjID[0]; 
    var checkBoxItemID = halfClientID + "QCheckBoxListAttributeValue";
    var dropDownListID  = halfClientID + "QDropDownListDefaultValue";
    var selectAllID =   halfClientID + "CheckAll";
    var checkBoxList = document.getElementsByTagName("input");
    var arrListValue = document.getElementById(checkBoxItemID).ListValue.split(','); 
    var arrListText = document.getElementById(checkBoxItemID).ListText.split(',');
    var count = arrListValue.length;
    var strCheckChecked = "";  
    var arrCheckChecked;

      //每次点击CheckBoxList的一个Item，都循环把所有Item的选中状态按0、1标志，存入一个变量，最后再根据这个标志来决定DropDownList应该添加那些Item
    for (var i=0; i< checkBoxList.length; i++) 
    { 
        if (checkBoxList[i].id.indexOf(checkBoxItemID) >= 0)
        { 
            if(checkBoxList[i].checked)
            {
                strCheckChecked = strCheckChecked + "1" + ",";
            }
            else
            {
                strCheckChecked = strCheckChecked + "0" + ",";
            }
        } 
   } 
    document.getElementById(dropDownListID).innerText = "";
    arrCheckChecked =  RTrim(strCheckChecked).split(',');
     for(var j = 0; j < count; j++)
     {
         if(arrCheckChecked[j] == "1")
         {
             var tOption = document.createElement("Option");
             tOption.text=arrListText[j];           
             tOption.value=arrListValue[j];
             document.all(dropDownListID).add(tOption);
         }
     }   
     if(strCheckChecked.indexOf("0") <0) 
     {
        document.getElementById(selectAllID).checked = true;
     }
     else
     {
        document.getElementById(selectAllID).checked = false;
     }
     if(checkBoxID.checked) 
    {
        document.all(dropDownListID).value =checkValue; 
    }
}

function RTrim(str) 
{ 
    var i; 
    for(i=str.length-1;i>=0;i--) 
    { 
        if(str.charAt(i)!=","&&str.charAt(i)!=",")break; 
    } 
    str=str.substring(0,i+1); 
    return str; 
} 
</script>

后台代码：

CheckBoxList CheckBoxListValue = e.Item.FindControl("QCheckBoxListAttributeValue") as CheckBoxList;
DropDownList dropDownListDefaultValue = e.Item.FindControl("QDropDownListDefaultValue") as DropDownList;
HtmlInputCheckBox checkAll = e.Item.FindControl("CheckAll") as HtmlInputCheckBox;

CheckBoxListValue.DataSource = plValue;
                CheckBoxListValue.DataTextField = "attribute_value_name";
                CheckBoxListValue.DataValueField = "attribute_value_id";
                CheckBoxListValue.DataBind();
                //get checkboxlist's value and text for js control ---add by sammy song 2007-08-07
                string checkListValue = "";
                string checkListText = "";
                for (int i = 0; i < plValue.Count; i++)
                {
                    checkListValue += plValue[i].Row["attribute_value_id"].ToString() + ",";
                    checkListText += plValue[i].Row["attribute_value_name"].ToString() + ",";                    
                }
                checkListText = checkListText.TrimEnd(',');
                checkListValue = checkListValue.TrimEnd(',');
                  //因为在前台用JS读不到CheckBoxList每个Item的Value和Text, 所以后台添加ListValue和ListText两个属性，把所有Item的Value和Text聚合起来，然后在前台读取
                CheckBoxListValue.Attributes["ListValue"] = checkListValue;
                CheckBoxListValue.Attributes["ListText"] = checkListText;
                //end add

dropDownListDefaultValue.Items.Clear();
            bool allSelected = true;
            foreach (ListItem item in CheckBoxListValue.Items)
            {                
                item.Attributes.Add("OnClick", "checkSingle(this, '" + item.Value + "')");                
                if (this.m_PlAttValueTable.Select(string.Format("ref_attribute_id={0} and ref_attribute_value_id={1}",
                    LabelAttributeID.Text, item.Value)).Length > 0)
                {
                    item.Selected = true;
                    dropDownListDefaultValue.Items.Add(new ListItem(item.Text, item.Value));
                }
                else
                {
                    allSelected = false;
                }           
            }