zoukankan      html  css  js  c++  java
  • 全选和反选案例

    关键代码:

    <!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>Document</title>
    
        <!--js部分,三个按钮,全选,取消,和反选,点击全选按钮时,下面所有选项之后的复选框都会选中;-->
        <!--点击取消按钮时,下面所有选项后的复选框都不会被选上;点击反选按钮时,下面选项后的复选框-->
        <!--如果选上了,就会被取消,如果没有选上,就会选上。-->
        <script>
            window.onload=function(){
                var btns=document.getElementsByTagName("button");
                var inputs=document.getElementsByTagName("input");
                //把点击按钮1事件和点击按钮2事件封装成一个函数,给这个函数传入一个值,复选框相应的会有不同的反应
                function all(flag){
                    for(var i=0;i<inputs.length;i++)
                    {
                        inputs[i].checked=flag;
                    }
                }
    
               //函数调用时的用法要注意,是一个事件发生时,调用函数需要传入什么值,才能得到这个按钮需要的效果
                btns[0].onclick=function()    //错误写法:btns[0].all(true);
                {
                    all(true);
                }
                btns[1].onclick=function()
                {
                    all(false);
                }
                btns[2].onclick=function()   //反选按钮可以用三目运算符来写,选中?false:true
                {
                    for(var i=0;i<inputs.length;i++)
                    {
                        inputs[i].checked==true ?  inputs[i].checked=false  :  inputs[i].checked=true     // 错误写法inputs[i].checked==true?  false:true;
                    }
    
                }
    
            }
        </script>
    </head>
    <body>
    <button >全选</button>
    <button>取消</button>
    <button>反选</button>
    <ul>
        <li>选项1:<input type="checkbox" /></li>  <!--type="checkbox"表示复选框-->
        <li>选项1:<input type="checkbox"/></li>
        <li>选项1:<input type="checkbox"/></li>
        <li>选项1:<input type="checkbox"/></li>
        <li>选项1:<input type="checkbox"/></li>
        <li>选项1:<input type="checkbox"/></li>
        <li>选项1:<input type="checkbox"/></li>
    </ul>
    </body>
    </html>
  • 相关阅读:
    [转] 美股评论:远离波动的噪音
    [转] GDB 下 watch的使用
    [转] Web性能压力测试工具之ApacheBench(ab)详解
    [转] Ubuntu 12.04下LAMP安装配置 (Linux+Apache+Mysql+PHP)
    [转] 在 Linux 中怎样使用cp命令合并目录树
    [转] postgresql常用命令
    [转] 跟着美联储投资
    [转] 智能指针(三):unique_ptr使用简介
    关于前端开发
    [转] 美股评论:美国散户血泪辛酸
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11198499.html
Copyright © 2011-2022 走看看