全选,复选功能的实现

来源:互联网 发布:indesign mac 编辑:程序博客网 时间:2024/05/22 17:25

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<table border="1" width="60%">
<tr>
<td><input type="checkbox" name="all"/>全选</td>
<td>复选框示例</td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>1</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>2</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>5</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>6</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="reall"/>反选</td>
<td></td>
</tr>
</table>
<script>
var allDom = document.getElementsByName("all")[0];
var numDoms = document.getElementsByName("num");
var reallDom = document.getElementsByName("reall")[0]
allDom.onclick = function(){
if(this.checked){
for(var i=0;i<numDoms.length;i++){
numDoms[i].checked = true;
}
}else{
for(var i=0;i<numDoms.length;i++){
numDoms[i].checked = false;
}
}
}
reallDom.onclick = function(){
for(var i=0;i<numDoms.length;i++){
if(!numDoms[i].checked){
numDoms[i].checked = true;
}else{
numDoms[i].checked = false;
allDom.checked = false;
}
}
}
$(function(){
$("[name=num]").click(function(){
for(var i=0;i<numDoms.length;i++){
if(!numDoms[i].checked){
allDom.checked = false;
break;
}else{
allDom.checked = true;
}
}
});
});
</script>


</body>
</html>
原创粉丝点击