用JavaScript实现复选框的全选/全不选效果

最新推荐文章于 2023-07-17 14:37:33 发布

codingXT

最新推荐文章于 2023-07-17 14:37:33 发布

阅读量7k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37774171/article/details/86583574

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

判断复选框是否被选中的属性是checked，如果checked属性的值为true，则说明复选框已选中，如果checked属性的值为false，则说明复选框未被选中，可以先将每个复选框的name设置为同名，然后使用getElementsByName()方法访问所有同名的复选框，最后使用循环语句来统一设置所有复选框的checked属性，从而实现全选/全不选效果

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 function check(){
	 var oInput=document.getElementsByName("product");
	 for(var i=0;i<oInput.length;i++){
		 oInput[i].checked=document.getElementById("all").checked;
	 }
	 
 }
 
 
 
 
</script>
</head>
<body>
<table border="0" cellspacing="0" class="bg">
        <td><input id="all" type="checkbox" value="全选" onclick="check()"/>全选</td>
         <td>商品图片</td>
         <td>商品名称</td>
         <td>商品价格</td>
         <tr>
         <td><input name="product" type ="checkbox" value="1"/></td>
         <tr>
         <td><input name="product" type ="checkbox" value="2"/></td>
         <tr>
         <td><input name="product" type ="checkbox" value="3"/></td>
         <tr>
         <td><input name="product" type ="checkbox" value="4"/></td>
</table>
</body>
</html>

codingXT

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现复选框的全选/全不选效果

判断复选框是否被选中的属性是checked，如果checked属性的值为true，则说明复选框已选中，如果checked属性的值为false，则说明复选框未被选中，可以先将每个复选框的name设置为同名，然后使用getElementsByName()方法访问所有同名的复选框，最后使用循环语句来统一设置所有复选框的checked属性，从而实现全选/全不选效果示例：&lt;!DOCTYPE htm...
复制链接

扫一扫

专栏目录