Home > Article > Web Front-end > HTML+css+js implements full selection and inverse selection of check boxes

HTML+css+js implements full selection and inverse selection of check boxes

高洛峰Original: 2016-10-12 14:30:121604browse

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>html+css+js实现复选框全选与反选</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="js,笔试题目" />
        <style type="text/css">
            table,tr,td
            {
                border:1px solid red;
            }
        </style>
        <script type="text/javascript">
            function quanxuan()
            {
                for(var i=1;i<=3;i++)
                {
                    var cbox_id="cb"+i;
                    var cbox=document.getElementById(cbox_id);
                    //alert(cbox.value);
                    if(document.getElementById("cb_quanxuan").checked)
                        cbox.checked=true;
                    else
                        cbox.checked=false;
                }
            }
            function fanxuan()
            {
                for(var i=1;i<=3;i++)
                {
                    var cbox_id="cb"+i;
                    var cbox=document.getElementById(cbox_id);
                    if(document.getElementById("cb_fanxuan").checked)
                    {//选中反选框
                        if(cbox.checked)
                            cbox.checked=false;
                        else
                            cbox.checked=true;
                    }
                    else
                    {
                        if(cbox.checked)
                            cbox.checked=false;
                        else
                            cbox.checked=true;
                    }
                }
            }
        </script>
        
    </head>
    <body>
        <form id="form1">
            <table>
                <tr>
                    <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td>
                    <td>复选框全选案例</td>
                    <td> </td>
                    <td> </td>
                </tr>
                
                <tr>
                    <td><input type="checkbox" id="cb1" value="1" />1</td>
                    <td>我是傻逼1</td>
                    <td> </td>
                    <td> </td>
                </tr>
                
                <tr>
                    <td><input type="checkbox" id="cb2" value="2" />2</td>
                    <td>我是傻逼2</td>
                    <td> </td>
                    <td> </td>
                </tr>
                
                <tr>
                    <td><input type="checkbox" id="cb3" value="3" />3</td>
                    <td>我是傻逼3</td>
                    <td> </td>
                    <td> </td>
                </tr>
                
                <tr>
                    <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td>
                    <td>反选案例</td>
                    <td> </td>
                    <td> </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js closure and prototypeNext article：js closure and prototype

See more

HTML+css+js implements full selection and inverse selection of check boxes

Related articles