复选框的使用,全选效果的实现
复选框的使用,全选效果的实现
风中帆 发表于4年前
复选框的使用,全选效果的实现
  • 发表于 4年前
  • 阅读 79
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: 在jsp页面中使用复选框,实现勾选,并把都选数据提交到后台;全选效果的实现

(一)复选框的使用:
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);
}
    });
});

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 13
博文 186
码字总数 17363
×
风中帆
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: