複選框的使用,全選效果的實現

(一)複選框的使用:
一、jsp頁面上:在頁面上加入複選框;加入js函數
js函數:若是複選框的checked爲true,那麼就把複選框的值value加到字符串s中,而後把最後的s賦給一個隱藏域,在action取其值,並使用
<input type="checkbox" id="gchecked" name="gchecked" value="${userId }" />
<script type="text/javascript">
     var obj=document.getElementsByName('gchecked');
 var s='';   
 for(var i=0;i<obj.length;i++){
        if(obj[i].checked){
         s+=obj[i].value+',';
         }
 }
      if(''==s){
   alert("您沒有選擇任何內容 !");
 }else{
         if(""==sessionId){
          document.id_form.action="mToLogin";
          document.id_form.submit();
          }else{
                  document.id_form.selectedId.value=s;
           document.id_form.submit();
          }
  }
        }
</script>javascript

二、在action中使用
   String[] gg=selectedTrolleyId.split(",");
   List list=new ArrayList();
   for(int i=0;i<gg.length;i++){
 list.add(gg[i]);
   }java

 

(二)全選的使用:
1.在頁面中加入全選複選框
<input type="checkbox" id="checkAll" name="checkAll">全選
2.加入js函數(全選實現了其餘複選框的選中與未選中,與後臺無關)
$(function () {
    //全選按鈕單擊事件   按鈕id爲checkAll   
    $("#checkAll").bind("click", function () {
        //獲得全選按鈕對象   
        var obj = $("#checkAll:checkbox");
        //獲得全選按鈕當前的狀態:選中or未選中   
        var checkFlag = obj.attr("checked");
        //若是全選按鈕選中,則下面的列表中的複選框所有勾中   
        if(checkFlag)
        {
            $("[name = giftchecked]:checkbox").attr("checked", true);
        }
        //若是全選按鈕未選中,則下面的列表中的複選框所有未選中 
        if(!checkFlag)
        {
            $("[name = giftchecked]:checkbox").attr("checked", false);
        }
    });
    //列表中複選框的單擊事件  按鈕name爲selectUid   
    $("[name = giftchecked]:checkbox").bind("click", function () {
        //獲得全選按鈕       
        var checkAllObj = $("#checkAll");
        //獲得列表中的複選框       
        var checkOneObj = $("[name = giftchecked]:checkbox");
        //迭代列表中的複選框   根據是否爲所有選中來設置全選按鈕的狀態       
        for(var i=0; i < checkOneObj.length; i++)
        {
            var sonCheckFlag = $(this).attr("checked");
            //列表中的複選框有任意一個未選中   全選按鈕的狀態改成未選中    
            if(!sonCheckFlag)
    {
checkAllObj.attr("checked", false);
return;
    }
}
        //列表中的複選框被選中的個數
var count = 0;
for(var i=0; i < checkOneObj.length; i++)
        {
            var theOne = checkOneObj[i];
            var sonCheckFlag = $(theOne).attr("checked");
    if(sonCheckFlag)
    {
count = count + 1;
    }
}
        //若是列表中的複選框被選中的個數與列表中的複選框的個數相等  設置全選按鈕爲選中狀態
if(count == checkOneObj.length)
{
    checkAllObj.attr("checked", true);
}
    });
});session

相關文章
相關標籤/搜索