您的位置：首页 > Web前端 > JavaScript

JS对checkbox全选和取消全选

2017-03-08 11:41 399 查看

需求：checkbox控制列表数据全选与取消全选择。

效果图：

1、html

<body >
<input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/>
<input type="file" id="File1" name="File1" style="display:none;">
<input type="button" name="outbtn" value="导出"/>

<table border="1">
<!-- <tr>
<a href="javascript:;" class="a-upload"> </a>
</tr>-->
<tr>
<td><input  id="all" type="checkbox" name="yon" onclick="chk()"/></td>
<td>ID</td>
<td>地区</td>
</tr>
<c:forEach items="${dislist }" var="dis">
<tr>
<td><input id="mychk" type="checkbox" name="mychk"/></td>
<td>${dis.id }</td>
<td>${dis.name }</td>

</tr>
</c:forEach>

</table>

</body>

2、js

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">
/* $("#all").click(function(){
alert("11111111");
if(this.checked){
alert("2222");
$("mychk").prop("checked",true);
}else{
$("mychk").prop("checked",false);
}

}); */
function chk(){
var all = document.getElementById("all");
var mychk = document.getElementsByName("mychk");
alert("mychk长度=="+mychk.length);
if(all.checked==true){
alert("all.checked==true全选");
if(mychk.length){
for(var i=0;i<mychk.length;i++){
mychk[i].checked = true;
}

}
mychk.chcked=true;
}else{
alert("all.checked==false全不选");
if(mychk.length){
for(var i=0;i<mychk.length;i++){
mychk[i].checked = false;
}

}
}

}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航