チェックボックスをつけてみる(html)

jsとhtml&cssの課題
JavaScriptはじめのいっぽ - blog
これの続き

●課題
・ラジオボタンをcheckboxにする。
・１つチェックついてたら、ついてる方の言葉を。２つともチェックついてたら、両方の言葉を、Alertで出すように。
・ボタンは１つ。
・関数は１つのみ。Alertの記述も１個だけ。

●提出コード(後に修正することに)
下記のコードで動いたので提出
コメント内の★マークはそのときの疑問点。☆はミスったけど修正したところとか、自分用のメモ

<html>
    <head>
        <script>
            function clicktest(){
                //チェックボックスがオンの項目を保持する変数を作成する
                var tabemonoStr="";
                
                //for文でチェックボックスのvalueを１つずつ確認する
                for( i=0; i<2; i++ ){
                    //チェックボックスがチェックされているかを確認する
                    // ★elementsが使えるのはname属性だけ？id属性に対して実行したら使えなかった。
                    if( document.target.elements[i].checked ){
<200b>
                        //変数tabemonoStrが空でない時、区切りのコンマを入れる
                        if( tabemonoStr != "" ) tabemonoStr=tabemonoStr+",";
                        
                        //チェックボックスのvalue値を変数tabemonoStrに入れる
                        tabemonoStr = tabemonoStr + document.target.elements[i].value;
                    }
                }
                alert( tabemonoStr + "が食べたいです。" ); //☆if内に入れて変な感じになったので次回注意。
            }
        </script>
    </head>
    <body>
        <h1>JavaScript基礎</h1>
        <p>いま食べたいものは？（複数可）</p>
        <form name="target"> <!-- ★idは不要か？-->
            <input type="checkbox" value="もつ鍋"> もつ鍋
            <input type="checkbox" value="餃子"> 餃子
        </form>
        <input type="button" onclick="clicktest()" value="チェックのある文言をAlertするボタン"">
    </body>
</html>

●指摘を受けた箇所
この書き方だと、form内にチェックボックス以外の部品があったとき、それもぜんぶ拾ってしまうから。チェックボックスにIDをつけて、getElementByIdで状態を取るとよいかも

●直したところ
・getElementByIdを使う方法に修正した。
・formにidを設定した。これでform内にチェックボックス以外の部品があっても、チェックボックスのvalueだけを拾ってくれるね。

                <!-- よい書き方 --!>
                <form id="target">
                    <input type="checkbox" value="もつ鍋"> もつ鍋
                    <input type="checkbox" value="餃子"> 餃子
                </form>

● 修正後コード全文（デグレチェックOK）

<html>
    <head>
        <script>
            function clicktest(){
                //チェックボックスがオンの項目を保持する変数を作成する
                var tabemonoStr="";
                var element = document.getElementById( "target" ) ; 
                //↑☆getElementbyIdで状態を取得するように修正した。これでform内にチェックボックス以外の部品があったときでも、idがtargetの要素のみを拾う
<200b>
                //for文でチェックボックスのvalueを１つずつ確認する
                for( i=0; i<2; i++ ){
                    //チェックボックスがチェックされているかを確認する
                    if( element[i].checked ){
<200b>
                        //変数tabemonoStrが空でない時、区切りのコンマを入れる
                        if( tabemonoStr != "" ) tabemonoStr=tabemonoStr+",";
                        
                        //チェックボックスのvalue値を変数tabemonoStrに入れる
                        tabemonoStr = tabemonoStr + element[i].value;
                    }
                }
                alert( tabemonoStr + "が食べたいです。" ); 
            }
        </script>
    </head>
    <body>
        <h1>JavaScript基礎</h1>
            <p>いま食べたいものは？（複数可）</p>
                <form id="target">
                    <input type="checkbox" value="もつ鍋"> もつ鍋
                    <input type="checkbox" value="餃子"> 餃子
                </form>
        <input type="button" onclick="clicktest()" value="チェックのある文言をAlertするボタン"">
    </body>
</html>

メモ

●ダメだった修正パターン
「行ごとにidを設定する」だと期待した結果が得られなかった(画面でAlertが出なかった)。

                <!-- これでは動かなかった --!>
                <form>
                    <input type="checkbox" id="target" value="もつ鍋"> もつ鍋
                    <input type="checkbox" id="target" value="餃子"> 餃子
                </form>

原因は「？」。
form内に同一のidを複数行にわたって設定しても問題ないらしいけど、Alertがでなくなった。

●もらったコメント
・checkbox内にidとnameの両方書いても良い。
・nameを同じに設定することで、checkboxは片方を押したらもう片方が外れるようになる。

checkbox id=“checkbox1” name=“aaa”
checkbox id=“checkbox2” name=“aaa”

で、スクリプトで、

document.getElementById(‘checkbox1’);

をすると、checkbox1の選択値が取れる。

あとで読み返す用