JS表单全选以及反选

最新推荐文章于 2023-07-07 19:18:26 发布

GGxGx

最新推荐文章于 2023-07-07 19:18:26 发布

阅读量306

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Guoxuxinwen/article/details/104577411

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

效果图：

当表单内所有均被选择时，最上方全选自动勾选；
当表单内有选项未被选择时，最上方全选自动取消；
当最上方全选勾选时，表单内所有均被自动勾选。

在这里插入图片描述

<body>
    <div class="wrap">
        <table>
            <thead>
              <tr>
                  <th>
                      <input type="checkbox" id="j_cbAll" />
                  </th>
                  <th>商品</th>
                  <th>价钱</th>
              </tr>
            </thead>
            <tbody id="j_tb">
              <tr>
                  <td>
                      <input type="checkbox" />
                  </td>
                  <td>iPhone8</td>
                  <td>8000</td>
              </tr>
              <tr>
                  <td>
                      <input type="checkbox" />
                  </td>
                  <td>iPad Pro</td>
                  <td>5000</td>
              </tr>
              <tr>
                  <td>
                      <input type="checkbox" />
                  </td>
                  <td>iPad Air</td>
                  <td>2000</td>
              </tr>
              <tr>
                  <td>
                      <input type="checkbox" />
                  </td>
                  <td>Apple Watch</td>
                  <td>2000</td>
              </tr>
    
            </tbody>
        </table>
        <input type="button" value="  反 选  " id="btn">
    </div>
	<script type="text/javascript">
		//1.获取元素
		var j_cbAll = document.getElementById('j_cbAll');
		var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
		j_cbAll.onclick = function() {
			//this.checked若为true则表示选中该选择框
			for (var i = 0 ; i < j_tbs.length; i++) {
				j_tbs[i].checked = this.checked;
			}
		}
		//2.下面全部选中，上面选中
		for (var i = 0; i < j_tbs.length; i++){	
			j_tbs[i].onclick = function() {
				var flag = true;
				for(var i = 0 ; i < j_tbs.length; i++){
					console.log(!j_tbs[i].ckecked);
					if (!j_tbs[i].checked) {
						flag = false;	
					}
				}
				// console.log(flag);
				j_cbAll.checked = flag;
				
			}
		}
	</script>
</body>