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

问题描述：

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

这是代码

ios马甲包

1

2

3

4

5

6

7

8

答

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

答

可以在复选框的前面加一个名称为全选的复选框，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的值

答

        <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);
}
});

答

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

答

思路：如果全选的值为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);
    }
  };

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

相关推荐