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

Bertha 。 2022-03-25 18:50 306阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 413 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 277 阅读

相关 JQuery实现复选框全选

首先一种最low的方法 $("checkAll").click(function(){ var $checkRows = $("input[

冷不防/ 2022年05月14日 02:09/ 0 赞/ 321 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 326 阅读

相关原生js实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和

小鱼儿/ 2022年04月06日 07:56/ 0 赞/ 434 阅读

相关 jquery实现复选框的全选与全不选与反选

<html> <head> <meta charset="utf-8" /> <title>全选/全不选/反选</title>

古城微笑少年丶/ 2022年04月03日 06:26/ 0 赞/ 303 阅读

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

判断复选框是否被选中的属性是checked，如果checked属性的值为true，则说明复选框已选中，如果checked属性的值为false，则说明复选框未被选中，可以先将每个

Bertha 。/ 2022年03月25日 18:50/ 0 赞/ 307 阅读

相关通过jquery实现复选框全选效果

通过jquery实现复选框全选效果实现的js和页面的HTML如下：  <script type="te

- 日理万妓/ 2021年12月11日 09:43/ 0 赞/ 341 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 463 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 586 阅读