js 全选框只能勾选一次而且无法取消被选中状态

function checkall() {
var checkall = document.getElementById("checkall");
var checkbox = document.getElementsByClassName("checkbox");

    if (checkall.checked) {
        for (var i = 0; i < checkbox.length; i++)
            checkbox[i].setAttribute("checked", true);
    }
    else {
        alert("uncheck");
        for (var i = 0; i < checkbox.length; i++)
            checkbox[i].setAttribute("checked", false);
    }
}

8个回答

设置property,不是attribute,而且代码可以胜率好多了。。不用加if..else判断了

     function checkall() {
        var checkall = document.getElementById("checkall");
        var checkbox = document.getElementsByClassName("checkbox");
        for (var i = 0; i < checkbox.length; i++) checkbox[i].checked = checkall.checked;
    }

function CheckboxAll(){
var checkall = document.getElementById("checkall");
var checkbox = document.getElementsByClassName("checkbox");
if(checkAll.checked){
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked = true;
}
}else{
for(var i=0;i<checkbox.length;i++){
checkbox[i].checked = false;
}
}

}

你想问的问题是什么?

qq_37338909
Layman丶 就是那个复选框做了一个全选复选框的东西 然后只能全选一次而且无法取消全选的状态 希望大佬帮忙了
2 年多之前 回复
 <th style="background-color:#3499db;">
           <label class="checkbox" for="checkboxx">
                  <input type="checkbox" value="" id="checkboxx">
           </label>
 </th>
 <td>
          <label class="checkbox" for="checkbox${t.tasksId}">
                  <input type="checkbox" class="checkboxClass" value="${t.tasksId}"  id="checkbox${t.tasksId}">
           </label>
 </td>
 <script type="text/javascript">
$(function(){
            $(".checkboxClass").change(function () {
        var num = 0;
        var checkNum = 0;
        $(".checkboxClass").each(function () {
            num++;
            if ($(this).is(":checked")) {
                checkNum++;
            }
        });
        if (num == checkNum) {
            $("#checkboxx").prop("checked", true);
            $("#checkboxx").parent().removeClass("halfchecked");
            $("#checkboxx").parent().addClass("checked");
        } else if (checkNum == 0) {
            $("#checkboxx").removeAttr("checked");
            $("#checkboxx").parent().removeClass("checked");
            $("#checkboxx").parent().removeClass("halfchecked");
        } else {
            $("#checkboxx").prop("checked", true);
            $("#checkboxx").parent().removeClass("checked");
            $("#checkboxx").parent().addClass("halfchecked");
        }
    });
    $("#checkboxx").change(function () {
        if ($(this).is(":checked")) {
            $(".checkboxClass").each(function () {
                $(this).prop("checked", true);
                $(this).parent().addClass("checked");
            });
            $(this).parent().removeClass("halfchecked");
        } else {
            $(".checkboxClass").each(function () {
                $(this).removeAttr("checked");
                $(this).parent().removeClass("checked");
            });
            $(this).removeAttr("checked");
            $(this).removeClass("checked");
            $(this).parent().removeClass("halfchecked");
        }
    });

});
</script>                           

我们项目中用的,你可以借鉴一下

     <script type="text/javascript">
            $(function(){
                    $("#selectAll").bind("click",function(){
                        if($("#selectAll").attr("checked")){//true說明當前是選中狀態
                                $("input[name='selectBox']").attr("checked",true);//設置全部不選中
                                $("input[name='selectBox']").attr("disabled",true);//不可選中
                        }else{
                                //$("input[name='selectBox']").attr("checked",false);//設置全部不選中
                                $("input[name='selectBox']").attr("disabled",false);//可以選中
                        }
            });
            });


點擊選中全部
第一個
第二個
第三個
第四個
meicuojiushiwoi
meicuojiushiwoi 你知道会得到什么值是选中,什么值是没选中就好,不要在意细节
2 年多之前 回复
sysu_Mid
很可爱的Mid 你确定$("#selectAll").attr("checked")可以返回true吗,我调试过输出只能是checked或者undefined
2 年多之前 回复
meicuojiushiwoi
meicuojiushiwoi 选中框在下面
2 年多之前 回复
  <body>
   <input type="checkbox" id="selectAll""/>點擊選中全部
   <input type="checkbox" name="selectBox" />第一個
   <input type="checkbox" name="selectBox"/>第二個
   <input type="checkbox" name="selectBox"/>第三個
   <input type="checkbox" name="selectBox"/>第四個
  </body>

checkbox[i].setAttribute("checked", false);改为checkbox[i].checked=false;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function checkall() {
                var checkall = document.getElementById("checkall");
                var checkbox = document.getElementsByClassName("checkbox");
                    if (checkall.checked) {
                        for (var i = 0; i < checkbox.length; i++)
                            checkbox[i].checked=true;
                    }
                    else {
                        for (var i = 0; i < checkbox.length; i++)
                            checkbox[i].checked=false;
                    }
                }
        </script>
    </head>
    <body>
        <input id="checkall" type="checkbox" onchange="checkall()"/>
        <input class="checkbox" type="checkbox" />
        <input class="checkbox" type="checkbox" />
        <input class="checkbox" type="checkbox" />
        <input class="checkbox" type="checkbox" />
    </body>
</html>

只要设置了checked属性无论true或者false或者“ ”,都会是选中的状态

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问