代码如下:
<table border="1" cellspacing="0" style="text-align: center;">
<tr>
<th>
<input type="button" value="全选" onclick="quan()" id="quan" style="width: 70px;">
<input type="hidden" value="全不选" onclick="no()" id="noq" style="width: 70px;">
<input type="button" value="反选" onclick="fan()" style="width: 70px;">
</th>
</tr>
<tr>
<td>
<input type="checkbox" > <!--复选框-->
</td>
</tr>
</table>
<script type="text/javascript">
function quan(){
var arr=$("input:checkbox");
arr.each(function(){
$(this).prop("checked",true);
})
$("#quan").prop("type","hidden");
$("#noq").prop("type","button");
}
function fan(){
var arr=$("input:checkbox");
arr.each(function(){
var b=$(this).prop("checked");
$(this).prop("checked",!b);
})
}
function no(){
var arr=$("input:checkbox");
arr.each(function(){
$(this).prop("checked",false);
})
$("#quan").prop("type","button");
$("#noq").prop("type","hidden");
}
</script>
效果如下:
点击全选按钮 全选按钮消失 全不选按钮显示:
点击全不选按钮 全不选按钮消失 全选按钮显示:
点击反选之前:
点击之后: