ネイティブJS、シングルマーキー

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>单选框</ タイトル> 
    < スタイル> 
        .OPTIONS>
            マージン：20ピクセル; 
        } 
        
        .checkedを{ 
            色：赤重要！。
        } 
    </ スタイル> 
</ ヘッド> 

< 身体> 
    < divのクラス= "ボックス" > 
        < divのクラス= "オプション" > 
            < HREF = "javascriptの:;" クラス= "確認" >男</ A > < のhref = "javascriptの:;" >
            > 
            < A HREF = "JavaScriptを：;" >秘密</ A > 
        </ DIV > 
    </ DIV > 
    < スクリプト> 
        のvar 一覧= document.querySelectorAll（" .OPTIONS A " ）; // 最初にすべてのタグを取得する
        コンソールを。 （リスト）ログ; // クラスの配列
        // list.onclick =関数（）{//要素のセットは、それが要素のセットのみであっても、唯一の添字オペレータにより、直接操作ではない

        // } 
        ため（VAR I =  0 ;私は< List.lengthを、I ++）{ 
            リスト[I] .onclick =  関数（）{ 

                // 最初の方法
                // 私はList.lengthを<; Iは++）{（VAR I = 0 
                //      リスト[I] .classList.remove（「チェック"）; //すべてクリア色
                // } 
                // this.classList.add（"確認"）; //どの色クリック追加

                // 第二の方法
                // するvar checkedOption = document.querySelector（"オプションを.. "）; //がチェックチェックするクラス取得にチェック
                // checkedOption.classList.removeを（"確認"）; //明確なすべてのクラス
                // this.classList.addは、（"）」にチェック; //このクラスを追加します

                。// 最初の三つの方法
                について（VARのI =  0 ;私は<List.length; Iは++ ）{
                     IF （この ==のリスト[I]）{ // このオプションは現在、現在の操作で[i]とこれに等しい、記述リスト[i]がリストならば、動作しています用語
                        この.classList.add（" 確認" ）; 
                    } 他{ 
                        一覧[I] .classList.remove（" 確認" ）; 
                    } 
                } 

            } 

        } 
    </ スクリプト> 
</ ボディ> 

</ HTML >
ネイティブJS、シングルマーキー

おすすめ
