JavaScript实现全选、反选、不选功能-蒲公英云

JavaScript实现全选、反选、不选功能

叁歲伎倆 2022-02-15 08:06 437阅读 0赞

实现代码：

<!DOCTYPE html>
<html>
<meta charset='utf-8' />
<body>
<input type='checkbox' name='id' />哈哈<br/>
<input type='checkbox' name='id' />哈哈<br/>
<input type='checkbox' name='id' />哈哈<br/>
<input type='checkbox' name='id' />哈哈<br/>
<input type='button' name='id' value='全选' onclick='return fun()' />
<input type='button' name='id' value='取消全选' onclick='return fan()' />
<input type='button' name='id' value='反选' onclick='return fans()' />
<script type="text/javascript">
function fun()
{
    var a=document.getElementsByName('id');
    for(var i=0;i<a.length;i++)
    {
        a[i].checked=true;
    }
}
function fan()
{
    var a=document.getElementsByName('id');
    for(var i=0;i<a.length;i++)
    {
        a[i].checked=false;
    }
}
function fans()
{
    var a=document.getElementsByName('id');
    for(var i=0;i<a.length;i++)
    {
        if(a[i].checked==true)
        {
            a[i].checked=false;    
        }
        else
        {
            a[i].checked=true;
        }
    }
}
</script>
</body>
</html>