js之表单（全选不选反选）

Posted 2020-09-23 追寻-我心

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js之表单（全选不选反选）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn1=document.getElementById(‘btn1‘);
    var oBtn2=document.getElementById(‘btn2‘);
    var oBtn3=document.getElementById(‘btn3‘);
    var oDiv=document.getElementById(‘div1‘);
    var aCh=oDiv.getElementsByTagName(‘input‘);
    
    oBtn1.onclick=function ()
    {
        for(var i=0;i<aCh.length;i++)
        {
            aCh[i].checked=true;
        }
    };
    
    oBtn2.onclick=function ()
    {
        for(var i=0;i<aCh.length;i++)
        {
            aCh[i].checked=false;
        }
    };
    
    oBtn3.onclick=function ()
    {
        for(var i=0;i<aCh.length;i++)
        {
            if(aCh[i].checked==true)
            {
                aCh[i].checked=false;
            }
            else
            {
                aCh[i].checked=true;
            }
        }
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="全选" /><br>
<input id="btn2" type="button" value="不选" /><br>
<input id="btn3" type="button" value="反选" /><br>
<div id="div1">
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
    <input type="checkbox" /><br>
  
</div>
</body>
</html>

以上是关于js之表单（全选不选反选）的主要内容，如果未能解决你的问题，请参考以下文章

超实用多选框 checkbox 功能——全选不选反选等功能的数据驱动 JS 实现

js全选，反选，全不选

JavaScript高手之路：全选不选反选效果

js 全选不选反选

angularjs 全选反选

js之表单 （全选不选反选）

js之表单（全选不选反选）