JS之全选、反选、不选

发布时间:2016-09-22 编辑:汤利军 阅读:

今天一打开网站、发现博客居然快半个月没更新了(狂汗.jpg).....

以前读书时候呢、觉得JS这东东特难,比葵花宝典还难。有一次上课、老师布置了个小作业、要求用JS做一个简单的单选、全选效果,结果一脸懵逼、不知如何下手。下面,就敲一下这个小效果、顺便温习一遍。


效果如下所示:


一、点击全选按钮、下方选项全部选中



二、点击不选按钮、下方选项则全部取消选中
 



三、点击反选、估计大伙也猜到了,此处...........省去一段字

看完效果、我们再来看看实现原理(略去html+css),原理很简单、首先获取三个单选按钮,分别为三个单选按钮添加点击事件;然后再把所有的复选框全部筛选出来(重点),做好以上两步、基本就大功告成了。

不扯了(嗓子都哑了)、直接上代码:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>全选、反选、不选</title>
    <style type="text/css">
        ul{list-style:none;}
    </style>
  </head>
 
  <script type="text/javascript">
        window.onload=function()
        {
            var oQx=document.getElementById('qx');
            var oFx=document.getElementById('fx');
            var oBx=document.getElementById('bx')
            var oDiv=document.getElementById('div');
            // 全选
            oQx.onclick=function()
            {
                var oIpt=oDiv.getElementsByTagName("input");
                for(var i=0; i<oIpt.length;i++)
                {
                    oIpt[i].checked=true;
                }
            }
            // 不选
            oBx.onclick=function()
            {
                 var oIpt=oDiv.getElementsByTagName("input");
                 for(var i=0; i<oIpt.length;i++)
                 {
                    oIpt[i].checked=false;
                 }
            }          
            // 反选
            oFx.onclick=function()
            {
                var oIpt=oDiv.getElementsByTagName("input");
                for(var i=0;i<oIpt.length;i++)
                {
                    if(oIpt[i].checked==true)
                      {oIpt[i].checked=false;}
                    else
                      {oIpt[i].checked=true;}
                }
            }
        }
  </script>
  <body>
    <input type="radio" name="rad" value="全选" id="qx">全选
    <input type="radio" name="rad" value="反选" id="fx">反选
    <input type="radio" name="rad" value="不选" id="bx">不选
 
    <div id="div">
        <p><input type="checkbox">语文</p>
        <p><input type="checkbox">数学</p>
        <p><input type="checkbox">英语</p>
        <p><input type="checkbox">历史</p>
        <p><input type="checkbox">地理</p>
        <p><input type="checkbox">政治</p>
        <p><input type="checkbox">化学</p>
        <p><input type="checkbox">物理</p>
        <p><input type="checkbox">生物</p>
    </div>
  </body>
</html>
 
若有疑问或不当之处、请指出。

关注我

图文推荐

云标签

友链交换