js控制checkbox 全选

最新推荐文章于 2022-01-21 11:20:47 发布

原创最新推荐文章于 2022-01-21 11:20:47 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

WEB 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现全选复选框的方法。通过一个全选按钮控制一组复选框的状态，实现了批量选择的功能。代码示例中包含了基本的HTML结构和JavaScript函数，适用于网页表单操作。

一个checkbox复选框，控制当前页面其他复选框是否全选。

先看jsp代码：

  <form id="myForm">
     <input type="checkbox" onclick='chkall("myForm",this)'>全部
   <input type="checkbox" name="checkbox">1
    <input type="checkbox" name="checkbox">2
    <input type="checkbox" name="checkbox">3
    <input type="checkbox" name="checkbox">4
 </form>

当都选了全部时下面的1234也会被选择，当去掉全部的勾选则下面的也全部跟着改变

js代码：

//全选checkbox
function chkall(input1,input2)
{
    var objForm = document.forms[input1];
    var objLen = objForm.length;
    for (var iCount = 0; iCount < objLen; iCount++)
    {
        if (input2.checked == true)
        {
            if (objForm.elements[iCount].type == "checkbox")
            {
                objForm.elements[iCount].checked = true;
            }
        }
        else
        {
            if (objForm.elements[iCount].type == "checkbox")
            {
                objForm.elements[iCount].checked = false;
            }
        }
    }
}