html全选反选

教程管理员发布于2023-09-30 22:10 HTML教程 124

简介： html全选反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>全选反选</title>
    </head>
    <body>
        <div id="hobby">
            <input type="checkbox"  value="1"/>唱歌
            <input type="checkbox"  value="2"/>跳舞
            <input type="checkbox"  value="3"/>rap
            <input type="checkbox"  value="4"/>篮球
        </div>
        
        <input type="button" onclick="all_check()" value="全选"/>
        <input type="button" onclick="no_check()" value="不选"/>
        <input type="button" onclick="toggle_check()" value="反选"/>
    </body>
</html>

<script>
    
    hobby = document.getElementById('hobby')
    var ainput = hobby.getElementsByTagName('input')
    var len = ainput.length
    
    
    function all_check() {
        for(var i=0;i<len;i++) {
            //ainput[i] checked值选中 
            ainput[i].checked = true
        }
    }

    function no_check() {
        for(var i=0;i<len;i++) {
            ainput[i].checked = false
        }
        
    }

    function toggle_check() {
        for(var i=0;i<len;i++) {
            if(ainput[i].checked == true) {
                ainput[i].checked = false
            }else {
                ainput[i].checked = true
            }
        }
    }

</script>

测试如下

标签：#阿里 #开发者 #全选 #社区 #html

上一篇：JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
下一篇：struts中获取多选按钮html:checkbox的值

html全选反选

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠