采用JAVASCRIPT实现全选的三种情况

最新推荐文章于 2025-03-29 10:30:48 发布

最新推荐文章于 2025-03-29 10:30:48 发布 · 127 阅读

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍使用JavaScript实现网页上全选功能的方法，包括选择页面所有复选框、选择同名复选框及具有相同前缀名的复选框。通过具体示例代码展示了如何操作这些元素的状态。

通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：
1、当前页面中所有的CHECKBOX全部选中及取消。
2、当前页面中所有同名的CHECKBOX全部选中。
3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。
这里以实例的形式，展示了三种情况的操作，完整源代码如下：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选示例</title>
</head>

<body>
<form action="" method="post" name="loginForm">
/********************全选示例********************/<br>
<b>水果（checkbox同名）：</b><br>
<input type="checkbox" name="fruit" value="1">苹果<br>
<input type="checkbox" name="fruit" value="2">梨<br>
<input type="checkbox" name="fruit" value="3">桃<br>
<input type=button value="全选水果" onclick="checkAllFruit()">
<input type=button value="取消全选水果" onclick="unCheckAllFruit()"><br>

<b>蔬菜：</b><br>
<input type="checkbox" name="vegetable" value="4">大白菜<br>
<input type="checkbox" name="vegetable" value="5">西红柿<br>

<b>水果2（checkbox不同名，具有相同的前缀名）：</b><br>
<input type="checkbox" name="_fruit1" value="6">苹果<br>
<input type="checkbox" name="_fruit2" value="7">梨<br>
<input type="checkbox" name="_fruit3" value="8">桃<br>
<input type=button value="全选水果2" onclick="checkAllFruit2()">
<input type=button value="取消全选水果2" onclick="unCheckAllFruit2()"><br>

<input type="checkbox" name="vegetable" onclick="doChangeCheckStatus(this);">全选
<input type=button value="所有全选" onclick="checkAll()">
<input type=button value="取消所有全选" onclick="unCheckAll()">

</form>
</body>
</html>
<Script language="JavaScript">...
function checkAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
                 objs[i].checked = true;

      }        

}
function checkAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")            
                    objs[i].checked = true;

      }        

}
function checkAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
            ...{                
                    objs[i].checked = true;
            }

      }        

}
function unCheckAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )            
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
                    objs[i].checked = false;

      }        

}
function doChangeCheckStatus(obj)
...{
    if(obj.checked==true)
    ...{
        checkAll();
    }
    else
    ...{
        unCheckAll();
    }
}

</script>