javascript 全选与反选

最新推荐文章于 2020-09-29 08:12:20 发布

qqandpinecone

最新推荐文章于 2020-09-29 08:12:20 发布

阅读量407

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页中复选框全选和反选功能的方法，通过两个按钮控制一组复选框的状态，适用于批量操作场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
 //获取checkbox按钮组
 var allpro = document.getElementsByName("c1");
 //全选方法
 function change() {
    //获取全选按钮
 var all = document.getElementById("all");
 //全选按钮被选中时，遍历所有按钮
    if (all.checked) {
     for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox") {
     allpro[i].checked=true;

     }
     }
     //全选按钮未被选中时
    }else{
     for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox") {
     allpro[i].checked=false;
     }
     }
    }
 }
 //反选的方法
 function revs() {
    //获得反选按钮
 var reverse = document.getElementById("revcheck");
 //反选按钮被选中时，遍历所有按钮
    if (reverse.checked) {
     for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
     allpro[i].checked= false;
     }else if (allpro[i].type=="checkbox"&&allpro[i].checked==false) {
     allpro[i].checked= true;
     }

     }
     //反选按钮未被选中时
     }else{
        for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
     allpro[i].checked= false;
     }else if (allpro[i].type=="checkbox"&&allpro[i].checked==false) {
     allpro[i].checked= true;
     }

     }
     }
    }

</script>

</head>
<body>
<input type="checkbox" name="c0" id="all" value="全选" onclick="change()">全选
<input type="checkbox" name="r0" id="revcheck" value="反选" onclick="revs()">反选
<hr>
<table>
<tr>
<td><input type="checkbox" name="c1">篮球</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">足球</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">羽毛球</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">兵乓球</td>
</tr>
</table>
</body>
</html>

图片：

代码：

<style>
.wrap{margin: 20px;width: 800px;margin:auto;font-family:"微软雅黑 Light", Consolas}
table{border: 1px solid silver;border-collapse: collapse;border-spacing: 0;}
td,th{padding: 10px;border: 1px solid #D0D0D0;color: #404060;font-size: 16px;}
th{background-color: #26A1AF;color: #fff;font-weight: bold;}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
	$('#j_cbAll').change(function(){
  if($(this).is(':checked')){
     $("table input:checkbox").each(function(){
       $(this).prop('checked',$(this).is(':checked')?false:true);
     });
  }
});
});
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>选项</th>
<th>用户名称</th>
<th>密码</th>
<th>注册时间</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input  type="checkbox" name="op"/></td>
<td>纯净水</td>
<td>water</td>
<td>2018-11-14</td>
</tr>
<tr>
<td><input  type="checkbox" name="op"/></td>
<td>小草</td>
<td>flower</td>
<td>2018-10-12</td>
</tr>
<tr>
<td><input  type="checkbox" name="op"/>
<td>火星人</td>
<td>ufo</td>
<td>2018-10-28</td>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" id="j_cbAll" />[全选/反选]
</div>
</body>
</html>

图片：