チェックボックスのラベルのエラーが・・・

Question

<label for="sample_checkbox">
<input type="checkbox" id="sample_checkbox" />チェックしてください
</label>

このように簡単なチェックボックスを20個配置させたのですが、3行目のチェックボックスのラベルを押すと、ラベルにボタン機能がないのにチェックボックスにチェックが入ります。そこのチェックボックスだけです。そういうことが起こるのが。
3行目のその問題のチェックボックスは、他にも問題を起こします。隣のチェックボックスをクリックすると、問題のチェックボックスも連動してチェックが入ります。
cssで特に連動するようなことはしていませんし、ラベルにボタン機能をつけていません。
この原因がわかりません。教えてください。

Comments

[toutou]

これと同じのが２０個と言うことはこれと同じＩＤのが２０個あるってことですか？

[toutou]

あとたくさん質問されてるようですが、解決済みがほとんどないです。放置するのは、答えてくれた方にも失礼なので解決したのならば解決済みにし、解決してないのではあればなにがわからないかを質問してください。

[yoshipu]

ソースが一部なので答えるときに想像になります。

[date]

20個のチェックボックスを見ないと解決しそうにないので見せて

Answer 1

全てのlabel要素でfor属性値を指定している可能性

label要素をコピー＆ペーストでマークアップしている可能性はありませんでしょうか。

• どのラベルをクリックしても一番初めのチェックボックスがチェックされる - JSFiddle

<label for="sample_checkbox"><input type="checkbox" id="sample_checkbox" />チェックしてください</label>
<label for="sample_checkbox"><input type="checkbox" id="sample_checkbox" />チェックしてください</label>
<label for="sample_checkbox"><input type="checkbox" id="sample_checkbox" />チェックしてください</label>
<label for="sample_checkbox"><input type="checkbox" id="sample_checkbox" />チェックしてください</label>
<label for="sample_checkbox"><input type="checkbox" id="sample_checkbox" />チェックしてください</label>

label要素にはクリックされた時にfor属性値で指定されたid属性値のチェックボックスがチェックされる機能がありますが、同じid属性値が複数存在した場合は最初に宣言されたチェックボックスがチェックされる仕様です。

各々のlabel要素で重複しないfor属性値をつける

label要素のfor属性値(ひいてはinput要素のid属性値)には重複しない値を入れてください。

• input要素のid属性値/label要素のfor属性値に重複しない名前をつける - JSFiddle

<label for="sample_checkbox1"><input type="checkbox" id="sample_checkbox1" />チェックしてください</label>
<label for="sample_checkbox2"><input type="checkbox" id="sample_checkbox2" />チェックしてください</label>
<label for="sample_checkbox3"><input type="checkbox" id="sample_checkbox3" />チェックしてください</label>
<label for="sample_checkbox4"><input type="checkbox" id="sample_checkbox4" />チェックしてください</label>
<label for="sample_checkbox5"><input type="checkbox" id="sample_checkbox5" />チェックしてください</label>

input要素をlabel要素で括る

label要素がinput要素を子に持つ場合はfor属性値を指定しなくても構いません。

• input要素をlabel要素で括る - JSFiddle

<label><input type="checkbox" id="sample_checkbox1" />チェックしてください</label>
<label><input type="checkbox" id="sample_checkbox2" />チェックしてください</label>
<label><input type="checkbox" id="sample_checkbox3" />チェックしてください</label>
<label><input type="checkbox" id="sample_checkbox4" />チェックしてください</label>
<label><input type="checkbox" id="sample_checkbox5" />チェックしてください</label>

Re: diamonddogs さん

Comments

[diamonddogs]

idに入れる値は自分が好きな名前でいいですか？

[diamonddogs]

for=""に入る値が同じではなくてはいけない場合はどうすればいいですか？

[diamonddogs]

今調べたところラジオボタンそのものだけでなく、ラジオボタン項目の文字をクリックしたときにも、ラジオボタンにチェックマークが記入されるようになると出てきましたが、この3行目だけがそうなります。他の行のラジオボタンにもforが入ってるのに文字をクリックしてもラジオボタンにチェックマークが記入されません。

[think49]

3行目にあるlabel要素のfor属性値が1行目のinput要素のid属性値を指定しているのではないですか？
HTMLソースを確認して下さい。

[diamonddogs]

今やったところ、治りました。ありがとうございます。
感謝です。

Answer 2

最近のブラウザならチェックボックスと説明テキストが隣接するなら<label>で加工だけで十分です

<label><input type="checkbox" name="sample_checkbox[]" value="1">チェックしてください</label>
<label><input type="checkbox" name="sample_checkbox[]" value="2">チェックしてください</label>
<label><input type="checkbox" name="sample_checkbox[]" value="3">チェックしてください</label>
<label><input type="checkbox" name="sample_checkbox[]" value="4">チェックしてください</label>
<label><input type="checkbox" name="sample_checkbox[]" value="5">チェックしてください</label>

Comments

[diamonddogs]

つまり、labelにfor=""が入っているのが原因なのですか？
ですが、3行目だけですよ。こんな現象が起こったのは

[yambejp]

全体的なソースがないのでなんとも言えませんが
他の回答者のみなさんが指摘されているとおりidの付け方の問題かと思います
おそらくidの付け方かforの指定先がおかしいのでしょう

とはいえ、forで指定しなくてもできるのが今回ご提示した方式なので
このやり方なら誤動作しにくいとおもいます

[diamonddogs]

<label for="sample_checkbox">
<input type="checkbox" name="sample_checkbox" value="0" />チェックしてください
</label>
<label for="sample_checkbox">
<input type="checkbox" name="sample_checkbox" value="1"/>チェックしてください
</label>
と書いたのですが

[diamonddogs]

また、for=""に入る値が同じではなくてはいけない場合はどうすればいいですか？

[Y.H.]

「for=""に入る値が同じではなくてはいけない場合」この要件の場合、想定どおり動作しないだけです。

[diamonddogs]

yambejpさん、おっしゃる通りにやったら治りました。とても感謝しています。今回は、think49さんをベストアンサーにします。

Answer 3

ラベルタグを使うと文字ラジオボタンの横の文字をクリックするとラジオボタンが選択されるのは仕様です。
3行目はおそらく入れ子がおかしいのではないかと思われます。

Comments

[diamonddogs]

for=""に入ってる値がおかしいのですか？

[yoshipu]

それ単独ではおかしくないと思うのですが、20個書いたときに同じ値が入っているとおかしくなると思います。
みなさんもおっしゃっていますが、ソースを長くても全部書かれたらいいと思います。
でないと、こちらで類推することになり、質問者と回答者双方に不利益だと思います。前提が変われば回答が変わるので回答者は何度も回答することになってしまいます。

[diamonddogs]

すみません。
問題が解決しました。ありがとうございます。yoshipuさん、ありがとうございます。
今回はthink49さんをベストアンサーに選びます。