質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

6078閲覧

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

diamonddogs

総合スコア25

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/11/16 15:47

html

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toutou

2016/11/16 15:52

これと同じのが20個と言うことはこれと同じIDのが20個あるってことですか?
toutou

2016/11/16 16:23

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

2016/11/16 17:46

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

2016/11/17 09:46

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

回答3

0

ベストアンサー

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

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

HTML

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

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

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

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

HTML

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

input要素をlabel要素で括る

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

HTML

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

Re: diamonddogs さん

投稿2016/11/16 23:03

編集2016/11/17 13:01
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

diamonddogs

2016/11/17 07:41

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

2016/11/17 07:45

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

2016/11/17 08:27

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

2016/11/17 09:54

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

2016/11/17 12:43

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

0

最近のブラウザならチェックボックスと説明テキストが隣接するなら<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>

投稿2016/11/17 00:58

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

diamonddogs

2016/11/17 07:42

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

2016/11/17 07:47

全体的なソースがないのでなんとも言えませんが 他の回答者のみなさんが指摘されているとおりidの付け方の問題かと思います おそらくidの付け方かforの指定先がおかしいのでしょう とはいえ、forで指定しなくてもできるのが今回ご提示した方式なので このやり方なら誤動作しにくいとおもいます
diamonddogs

2016/11/17 08:22 編集

<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

2016/11/17 08:22

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

2016/11/17 08:55

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

2016/11/17 12:46

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

0

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

投稿2016/11/16 17:47

yoshipu

総合スコア115

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

diamonddogs

2016/11/17 07:46

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

2016/11/17 07:53

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

2016/11/17 12:45

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問