HTMLページでチェックボックスを操作する方法

チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラットフォームでも、選択を行う必要がある場所には必ずチェックボックスが表示されます。次に、以前書いた 2 つの小さなデモを紹介します。どちらもチェックボックスに関するもので、お役に立てば幸いです。

1 つ目は、すべてのチェックボックスを選択または選択解除する操作についてです。もちろん、選択した製品やその下のその他のチェックボックスがすべて選択されている場合は、すべて選択ボタンも選択されるという小さな機能も追加しました。その逆も同様です。

 <!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <タイトル></タイトル>
        <スタイル>
            td{
                境界線: 1px 黒一色;
                テキスト配置: 中央;
            }
            テーブル{
                境界線: 1px 黒一色;
            }
            #反対{
                境界線の半径: 50%;
                幅: 20px;
                高さ: 20px;
                境界線: 1px スタイル #eee;
                アウトラインスタイル: なし;
            }
        </スタイル>
    </head>
    <本文>
        <テーブル>
            <tr>
                <td><input id="all" type="checkbox">すべて選択</td>
                <td width="300px">チェックボックスのすべて選択の例</td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input class="list" type="checkbox"></td>
                <td></td>
            </tr>
            <tr>
                <td><input id="opp" type="button">選択を反転</td>
                <td></td>
            </tr>
        </テーブル>
        <スクリプト>
                var vll = document.getElementById("all");
                var vlist = document.getElementsByClassName("リスト");
                var vopp = document.getElementById("opp");
                vll.onclick=関数(){ 
                    for(var i=0;i<vlist.length;i++){    
                        vlist[i].checked=vll.checked;
                    }
                }
                for( var i=0;i<vlist.length;i++){
                    vlist[i].onclick=関数(){
                        if(this.checked==false){
                            vll.checked=false;  
                            }
                        それ以外{
                            (var i2=0;i2<vlist.length;i2++){ 
                                if(vlist[i2].checked==false){
                                    壊す;
                                }
                                if(i2>=vlist.length-1){
                                    vll.checked=true;   
                                }
                            }
                        }
                    }   
                }
                vopp.onclick=関数(){
                    for(var i=0;i<vlist.length;i++){
                    vlist[i].checked=!vlist[i].checked;
                        if(vlist[i].checked==false){
                            vll.checked=false;
                        }
                    }
                }
        </スクリプト>
    </本文>
</html>

2 つ目は、チェックボックスのスタイルをカスタマイズすることです。チェックボックスを画像に置き換えてクールな効果を追加します。ここでは、JavaScript を使用せずに、完全に CSS3 の記述を使用します。

 <!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <タイトル></タイトル>
        <スタイル>
            .box1{
                幅: 1000ピクセル;
                高さ: 50px;
                位置: 相対的;
            }
            入力{
                幅: 50px;
                高さ: 50px;
                不透明度: 1;
                表示: なし;
            }
            入力+ラベル{
                表示: ブロック;
                幅: 50px;
                高さ: 50px;
                背景: url(img/2.png);
                背景サイズ: 100%;
            }
            入力:チェック済み+ラベル{
                背景: url(img/1.PNG);
                背景サイズ: 100%;
            }
        </スタイル>
    </head>
    <本文>
        <div class="box1">
            <input type="チェックボックス" 名前="" id="input1" 値="" />
            <label for="input1"></label>
        </div>
        <div class="box2">
            <input type="チェックボックス" 名前="" id="input2" 値="" />
            <label for="input2"></label>
        </div>
        <div class="box3">
            <input type="チェックボックス" 名前="" id="input3" 値="" />
            <label for="input3"></label>
        </div>
    </本文>
</html>

上記は、エディターが紹介した HTML ページのチェックボックスの操作方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: CSS カウンターを使用して数字の順序付きリストを美しく表示する方法

>>: base target="" はフレームを開くためのベースリンクのターゲットを指定します