简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

HTML+css+js はチェックボックスの完全選択と逆選択を実装します

高洛峰
リリース： 2016-10-12 14:30:12
オリジナル
1592 人が閲覧しました

<!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>
ログイン後にコピー


関連ラベル：
html+css+js实现复选框全选与反选
ソース：php.cn
前の記事：jsクロージャとプロトタイプ 次の記事：js画像プレビュー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
次のいずれかのチェックボックスをオフにした後、選択したチェックボックスを変更 (すべて選択) するにはどうすればよいですか? JSで全チェックスクリプトを作成しましたが、すべてのチェックボックスがまだチェックされているかどうかを確認し、チェックされていない場合は「すべて選択」チェックボックスをオフにする実...
から 2024-04-01 17:46:03
0
1
411
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！