点击事件实现一个选择项的案例（全选，全不选

最新推荐文章于 2022-11-26 18:34:39 发布

爬楼梯的小新

最新推荐文章于 2022-11-26 18:34:39 发布

阅读量237

点赞数

分类专栏： JavaScript

原文链接：https://blog.csdn.net/weixin_47541751/article/details/110244383?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162752382816780269880910%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162752382816780269880910&biz_id=0&ut

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

这是一个使用JavaScript编写的HTML页面示例，展示了如何通过JavaScript的getElementsByTagName方法实现复选框的全选和全不选功能。点击按钮即可控制所有选项的选中状态。

摘要由CSDN通过智能技术生成

获取节点标签
循环出选择项
全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><input type="checkbox">篮球</li>
        <li><input type="checkbox">足球</li>
        <li><input type="checkbox">排球</li>
        <li><input type="checkbox">羽毛球</li>
        <li><input type="checkbox">乒乓球</li>
        <li><input type="checkbox">毽子</li>
        <li><input type="checkbox">舞蹈</li>
    </ul>
    <button onclick="fun1()">全选</button>
    <button onclick="fun2()">全不选</button>
</body>
</html>
<script>
// 全选
    var input=document.getElementsByTagName("input");
			function fun1(){
				for(var i=0;i<7;i++){
					input[i].checked=true;
				}
			} 
//全不选
    var input=document.getElementsByTagName("input");
    function fun2(){
        for(var i=0;i<7;i++){
            input[i].checked=false;
        }
    }

</script>

转载自：这里

关于JavaScript getElementsByTagName()方法介绍