看了网上很多解决input的复选框checked,在第二次勾选或全选反选时,出现选中了却不显示勾勾的,都是用jquery的方法去解决,要么prop(),要么attri(),对于只用纯javascrit的前端人员,非常不方便 。
也有用纯javascript解决的方法,但是非常的复杂和不方便,有的上下各一个复选框来判断,有的全选 ,反选,不选,取消各一个框,
其实这些都不用,下面是最简单的方法
<html>
<head>
<meta http-equiv="content-Type" Content="text/html;charset=utf-8"/>
<title>测试复选框的勾勾显示问题</title>
</head>
<body>
<div>
<input type="checkbox" name="checkall"/>全选/反选</input>
<table>
<tr><td><input type="checkbox" name="checktable"/></td><td>1</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>2</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>3</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>4</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>5</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>6</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>7</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>8</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>9</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>10</td></tr>
<tr><td><input type="checkbox" name="checktable"/></td><td>11</td></tr>
</table>
</div>
<script type="text/javascript">
var allinput=document.getElementsByName("checkall");
var input=document.getElementsByName("checktable");
//点击全选和反选框
allinput[0].onclick=function(){
for(var i=input.length-1;i>=0;i--)
{
//判断有没有checked特征
if(!input[i].getAttribute('checked'))
{
//这句是关键显示勾勾的属性
input[i].checked="checked";
//设置特性为true,方便你下步操作取值
input[i].setAttribute("checked",'true');
//判断是否有没选中的行,如果有一个都算不是全选
for(var j=input.length-1;j>=0;j--)
{
if(!input[j].checked && input[j].getAttribute("checked")!=='true')
{
break;
}
}
}else
//这里是反选
{
//删除特性
input[i].removeAttribute("checked");
//删除属性,不显示勾勾
input[i].checked=null;
//也是判断有没有都取消
for(var j=input.length-1;j>=0;j--)
{
if(input[j].checked && input[j].getAttribute("checked")==='true')
{
break;
}
}
}
}
};
//这里是单个点击的,选中和取消
for(var k=input.length-1;k>=0;k--)
{
input[k].onclick=function(){
if(this.getAttribute("checked"))
{
this.checked=null;
this.removeAttribute("checked");
}else
{
this.checked="checked";
this.setAttribute("checked","true");
}
}
}
</script>
</body>
</html>
//二次点击全选和反选,没有出显勾,是因为没有搞明白checked的特性和属性的问题,特性和属性有时候是完全不一样的,有时候同样
//这里就不截图了,只需要你把我这代码全复制保存文件名然后访问就一目了然,如果提示var可以换成let