当前位置：首页 > 经验

js获取复选框选中的值 js如何判断复选框是否被选中

经验
2021-11-10

相信不少人经常遇到全选中或者全不选中的情形，依旧是淘宝上的购物车，而这个也可以使用脚本来完成相应的功能。所以本篇博文就是主要来介绍一下相关的知识点。

一、案例需求

我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)，显示效果如下：

全选与全不选案例+JavaScript的DOM操作介绍

二、步骤分析

第一步，首先我们要先实现这个页面；

第二步，选中全选的那个复选框，通过id来选中；

第三步，当这个总的选中之后，下面的也要选中，下面用name元素。

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括我自己整理的一份前端资料和零基础入门教程，欢迎初学者和在进阶中的小伙伴。

三、代码实现

<html>
<head>
<title>全选与全不选</title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script>
function chooseOrNot(){ var checkAll=document.getElementById("checkAll"); //alert(checkAll); 
if(checkAll.checked==true){ //alert("全选");
//当这个复选框被选中，那就说明下面的复选框都回被选中
var checkOnes=document.getElementsByName("checkOnes"); //alert(checkOnes);//在开发人员调试工具中可以看出这是一个集合
for(var i=0;i<checkOnes.length;i++){
 checkOnes[i].checked=true;
 }
 }else{ var checkOnes=document.getElementsByName("checkOnes"); for(var i=0;i<checkOnes.length;i++){
 checkOnes[i].checked=false;
 }
 }
 } </script>
</head>
<body>
<table border="1" align="center" width="500px">
<tr>
<td colspan="4">
<input type="button" value="添加"><input type="button" value="删除"> 
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkAll" onclick="chooseOrNot()"></td>
<td>编号</td>
<td>姓名</td>
<td>年龄</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>1</td>
<td>张三</td>
<td>23</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>2</td>
<td>李四</td>
<td>31</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>3</td>
<td>王五</td>
<td>12</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>4</td>
<td>赵六</td>
<td>54</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>5</td>
<td>黄七</td>
<td>52</td> 
</tr>
<tr>
<td><input type="checkbox" name="checkOnes"></td>
<td>6</td>
<td>段九</td>
<td>12</td> 
</tr> 
</table>
</body></html>

实现效果如下所示：

全选与全不选案例+JavaScript的DOM操作介绍