用JavaScript实现全选-反选

2019-12-25 19:02:33 阅读：274 来源： 互联网

标签：function checked ipts JavaScript 反选全选 var fvs

实现全选-反选

在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。
样式如下所示：
在这里插入图片描述

样式代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>全选-反选</title>
</head>
<body>
    <h2>请选择您的兴趣爱好</h2>
    <input type="checkbox" value="全选"  id="chkAll"/><label for="chkAll">全选</label>
    <input type="button" value="反选" id="reverse" />
    <ul id="favors">
        <li><input type="checkbox" value="" />打篮球</li>
        <li><input type="checkbox" value="" />打篮球</li>
        <li><input type="checkbox" value="" />看电影</li>
        <li><input type="checkbox" value="" />看书</li>
        <li><input type="checkbox" value="" />书法</li>
        <li><input type="checkbox" value="" />唱歌</li>
        <li><input type="checkbox" value="" />徒步旅行</li>
    </ul>
</body>
</html>

JavaScript部分如下所示：

function $(id){
                return document.getElementById(id);
            }
            window.onload = function(){

                $("chkAll").onclick = function(){
                    var fvs = $("favors").getElementsByTagName("input");
                    for (var i = 0; i < fvs.length; i++) {
                        fvs[i].checked = $("chkAll").checked; 
                    };
                }

                $("reverse").onclick = function(){
                    var ipts = $("favors").getElementsByTagName("input");
                    for (var i = 0; i < ipts.length; i++) {
                        ipts[i].checked = !ipts[i].checked;
                    };
                }
                var fvs = $("favors").getElementsByTagName("input");
                for (var i = 0; i < fvs.length; i++) {
                    fvs[i].onclick = function(){
                        var  isChkAll = true;
                        for (var i = 0; i < fvs.length; i++) {
                            if(!fvs[i].checked){
                                isChkAll = false;
                                break;
                            }
                        };
                        $("chkAll").checked = isChkAll;
                    }
                };
        }

标签：function,checked,ipts,JavaScript,反选,全选,var,fvs
来源： https://www.cnblogs.com/hxz0618/p/12098435.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用JavaScript实现全选-反选

实现全选-反选