- 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); } }
设置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;
}
}
}
<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 你知道会得到什么值是选中，什么值是没选中就好，不要在意细节
- 2 年多之前 回复
-
- 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>
