复选框的使用，全选效果的实现

2019独角兽企业重金招聘Python工程师标准>>>

（一）复选框的使用:
1、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>

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

 

（二）全选的使用：
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);
}
    });
});

转载于:https://my.oschina.net/u/1450300/blog/270707