文档章节

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

风中帆
 风中帆
发布于 2014/05/29 16:23
字数 572
阅读 83
收藏 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
博文 193
码字总数 17363
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

阿里云API网关使用教程

API 网关(API Gateway)提供高性能、高可用的 API 托管服务,帮助用户对外开放其部署在 ECS、容器服务等阿里云产品上的应用,提供完整的 API 发布、管理、维护生命周期管理。用户只需进行简...

mcy0425
24分钟前
3
0
解决远程登陆误按ctrl+s锁屏假死恢复

使用putty时,偶尔发生屏幕假死,不能输入等情况。 后来发现,只要数据ctrl+s,就会假死;输入ctrl+q就可以恢复过来。 很多刚从windows转移到linux上来工作的朋友,在用vi/vim编辑文件时,常常...

HJCui
28分钟前
0
0
@Transactional

事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务;声明式事务基于...

asdf08442a
32分钟前
2
0
widows下强制解除8080端口占用问题

使用win+R打开命令窗口 输入以下命令查看哪个任务占用了8080端口 netstat -ano |findstr "8080" 然后通过任务id强制关闭占用该端口的进程 tskill 10044 // 自己的试情况而定,这个ID是LISTE...

_Artisan
41分钟前
2
0
productFlavors简单实用

最近项目中,不同环境需要配置的参数越来越多,为了减少修改代码次数。研究了一下productFlavors的使用方式,总结如下 1. as3.0以上版本使用productFlavors时需要指定一个flavorDimensions,...

火云
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部