文档章节

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

风中帆
 风中帆
发布于 2014/05/29 16:23
字数 572
阅读 94
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
风中帆
粉丝 14
博文 197
码字总数 17695
作品 0
青岛
私信 提问
小博老师演示常用JQuery效果 ——复选框全选和反选效果

[理论知识] 我们在实际开发应用程序的过程中,经常会遇到复选框全选和反选的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现复选框全选和反选的效果。 [步骤解读一]界面布局...

博为峰教研组
2016/11/18
13
0
jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn]) --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn]) --> 当元素失去焦点时,触发 blur 事件...

frwupeng517
2016/12/08
0
0
JS三教九流系列-jquery实例开发到插件封装2

我们先写实例,然后有必要在分装为插件,最后做更高级的处理! 封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688 前面的7个实例在这里 http://my.oschina.net/u/2352644/blog...

透笔度
2015/08/13
0
0
微信小程序实现购物车页面

设计思路: 一、从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二、点击复选框toggle操作 如已经选中的,经...

Jansens
2016/10/25
52
0
使用jq的toggle函数实现全选功能遇到的问题

今天做网站后台管理的时候,要实现一个单选全选的功能,很简单的功能,不过,遇到了一个很诡异的问题,写出来跟大家分享下。 功能就不赘述了,大家都懂,最初打算使用jq的toggle函数来绑定两...

保护单身狗协会理事
2013/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
1
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
2
0
Java并发编程:深入剖析ThreadLocal

ThreadLocal 的理解 ThreadLocal,很多地方叫线程本地变量,或线程本地存储。ThreadLocal为变量在每个线程中都创建了一个副本,每个线程可以访问自己内部的副本变量。===》解决的问题是线程间...

细节探索者
昨天
1
0
【Python3之异常处理】

一、错误和异常 1.错误 代码运行前的语法或者逻辑错误 语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) def test: ^SyntaxError: invalid...

dragon_tech
昨天
2
0
编写可维护的 JavaScript

几乎每个程序员都有接手维护别人遗留项目的经历。或者,有可能一个老项目某一天又被重新启动。 通常情况下,接手老项目都会让人恨不得抛弃掉整个代码库从头开始。老代码凌乱、文档缺失、需要...

前端小攻略
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部