简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

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

高洛峰
Release： 2016-10-12 14:30:12
Original
1570 people have browsed it

<!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>
Copy after login


Related labels：
html+css+js实现复选框全选与反选
source：php.cn
Previous article：js closure and prototype Next article：js image preview
Statement of this Website
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
Latest Articles by Author
Latest Issues
How can I change the selected checkboxes (select all) after unchecking one of the following checkboxes? I just created the check all script in JS but don't know how to implement it to check if a...
From 2024-04-01 17:46:03
0
1
411
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！