<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<style type="text/css"></style>
</head>
<body>
<table border='1' width='400' align='center' style='border-collapse:collapse;'>
<tr>
<th>序号</th>
<th>标题</th>
<th>发布时间</th>
<th>删除</th>
</tr>
<tr>
<td>1</td>
<td>上班</td>
<td>2016-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>2</td>
<td>下班</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>3</td>
<td>吃饭</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>4</td>
<td>睡觉</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td colspan='4' align='right'>
<input type='button' value='全选' id='check_all' />
<input type='button' value='取消' id='deselect' />
<input type='button' value='反选' id='invert_select' />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var in_check_all =document.getElementById("check_all");
var inp_name =document.getElementsByName("check");
var in_deselect =document.getElementById("deselect");
var in_invert_select =document.getElementById("invert_select");
//设置全选
in_check_all.onclick = function(){
for(var i=0;i<inp_name.length;i++){
inp_name[i].checked=true;
}
}
//设置取消
in_deselect.onclick =function (){
for(var i= 0 ;i<inp_name.length;i++){
inp_name[i].checked =false;
}
}
//设置反选
in_invert_select.onclick =function (){
for(var i =0 ;i<inp_name.length;i++){
if(inp_name[i].checked){
inp_name[i].checked=false;
}else{
inp_name[i].checked=true;
}
}
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<meta name="author" content="小滨滨" />
<style type="text/css"></style>
</head>
<body>
<table border='1' width='400' align='center' style='border-collapse:collapse;'>
<tr>
<th>序号</th>
<th>标题</th>
<th>发布时间</th>
<th>删除</th>
</tr>
<tr>
<td>1</td>
<td>上班</td>
<td>2016-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>2</td>
<td>下班</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>3</td>
<td>吃饭</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>4</td>
<td>睡觉</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td colspan='4' align='right'>
<input type='button' value='全选' id='check_all' />
<input type='button' value='取消' id='deselect' />
<input type='button' value='反选' id='invert_select' />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var in_check_all =document.getElementById("check_all");
var inp_name =document.getElementsByName("check");
var in_deselect =document.getElementById("deselect");
var in_invert_select =document.getElementById("invert_select");
//设置全选
in_check_all.onclick = function(){
for(var i=0;i<inp_name.length;i++){
inp_name[i].checked=true;
}
}
//设置取消
in_deselect.onclick =function (){
for(var i= 0 ;i<inp_name.length;i++){
inp_name[i].checked =false;
}
}
//设置反选
in_invert_select.onclick =function (){
for(var i =0 ;i<inp_name.length;i++){
if(inp_name[i].checked){
inp_name[i].checked=false;
}else{
inp_name[i].checked=true;
}
}
}
</script>
注释：当新手看到这题时，应该先把复选框所需要的外部体先做出，分析如何chekbox的属性，然后给以最通易的就是给所需要控制的按钮来加id，而给同类属性的加name
然后通过onlick点击事件来控制如何操作
扫一扫
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
