buyax 2017-08-07 02:20 采纳率: 53.3%
浏览 2192
已采纳

求助前端页面大神，复选框checkbox

如题，我自己做了一个小项目，前端实在太渣，checkbox复选框这个怎么弄全选以及不全选啊，以及我想把选中的数据在页面弄成list或者数组传递到后台
这是图片,框架用的是easyUI
图片说明

这是代码


ios马甲包

1

2

3

4

5

6

7

8

  • 写回答

5条回答 默认 最新

  • 青珣墨笠 2017-08-07 03:37
    关注

    图片说明
    如果是选中的 你再这两个地方 console一下 他的value值就好

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • Tsui丶 2017-08-07 02:28
    关注

    可以在复选框的前面加一个名称为全选的复选框，js判断如果该复选框选中，改变此复选框后面的所有复选框状态为选中，取消选中相同。
    对于传值 

    //点击传值的时候对数据进行处理
 function aa() {
var bb = "";
var temp = "";
var a = document.getElementsByName("checkTheme");
for ( var i = 0; i < a.length; i++) {
if (a[i].checked) {
temp = a[i].value;
bb = bb + "," +temp;
}
}
//bb即为处理后的字符串（“1,2,3,4,5,6,7,8”）
}
//action里面：
private String tempString;//get、set方法
String temp1[] = tempString.split(",");// 截取字符串，获得各个checkBox的值
    评论
  • qq_36336328 2017-08-07 02:31
    关注
            <input id="all" name="all" type="checkbox" value="-1" />全部
            <input id="nums1" name="nums" type="checkbox" value="1" />1
            <input id="nums2" name="nums" type="checkbox" value="2" />2
            <input id="nums3" name="nums" type="checkbox" value="3" />3
            <input id="nums4" name="nums" type="checkbox" value="4" />4
            <input id="nums5" name="nums" type="checkbox" value="5" />5
            <input id="nums6" name="nums" type="checkbox" value="6" />6
            <input id="nums7" name="nums" type="checkbox" value="7" />7
            <input id="nums8" name="nums" type="checkbox" value="8" />8

    $("#all").bind("click", function () {
    if(this.checked){
    $("input[name = nums]:checkbox").attr("checked", true);
    $("#all").attr("checked",true);
    }else{
    $("input[name = nums]:checkbox").attr("checked", false);
    $("#all").attr("checked",false);
    }
    });

    评论
  • 郭老师的小迷弟雅思莫了 Java领域新星创作者 2017-08-07 02:31
    关注

    前台有点像easyui。全选，反选，取消全选，这个你要用js去控制了。话说你这个不需要全选按钮吧，也就这几个选项，一个个点就是了，至于把选中的数据传入后台，这个你可以用ajax去异步操作。

    评论
  • 青珣墨笠 2017-08-07 02:35
    关注

    思路：如果全选的值为cheked即选中 遍历所有gam为checked 如果全选为null 遍历所有gam 为null;
    创建一个空变量num=0;遍历gam 选中一个 num++; 如果gam.length=num即全部选中 全选为checked
    打印在页面也是一样的 判断gam的 checked值 如果是选中的 输出到页面 样式自己随便设置

     <body>
        <input class="all" type="checkbox" value="全选"/>全选
        <input class="gam" type="checkbox" value="吃"/>吃
        <input class="gam" type="checkbox" value="喝"/>喝
        <input class="gam" type="checkbox" value="玩"/>玩
        <input class="gam" type="checkbox" value="乐"/>乐
    </body>

     var All=document.querySelector('.all');
var gam=document.getElementsByClassName('gam');
console.log(gam);
 All.onclick=function(){
    for(var i=0;i<gam.length;i++){
         if (this.checked){
                gam[i].checked="checked";
             } else{
                gam[i].checked=null;
             };
    };
    alert(All.value);
 };
 for(var x=0;x<gam.length;x++){
    gam[x].onclick=function(){
        var num=0;
       for(var j=0;j<gam.length;j++){ 
         if(gam[j].checked){
            num=num+1;
          }
         if(num<gam.length){All.checked=null}
         if(num==gam.length){All.checked='checked'}
       }
       alert(this.value);
    }
  };
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥15 求苹果推信imessage批量推信技术
  • ¥15 ubuntu 22.04 系统盘空间不足。隐藏的docker空间占用？（相关搜索：移动硬盘|管理系统）
  • ¥15 利用加权最小二乘法求亚马逊各类商品的价格指标？怎么求？
  • ¥15 c++ word自动化，为什么可用接口是空的？
  • ¥15 Matlab计算100000*100000的矩阵运算问题：
  • ¥50 VB6.0如何识别粘连的不规则的数字图片验证码
  • ¥16 需要完整的这份订单所有的代码，可以加钱
  • ¥15 Stata数据分析请教
  • ¥15 请教如何为VS2022搭建 Debug|win32的openCV环境?
  • ¥15 关于#c++#的问题：c++如何使用websocketpp实现websocket接口调用，求示例代码和相关资料