Q&A
ご回答ありがとうざいます＞＜
お手本としている、サイトを参考に作成しており、そのサイトもcheckboxタグなしで実装しているので、できなくはないのかな・・と思ったのですが、、checkboxタグは必須なのでしょうか？
必要な場合は、<span class="box centering"></span>の前に、<input>タグで書き込む形でしょうか？
参考サイト：
https://rinn.co.jp/contact/
いつもお世話になります>< フォームページのポリシーチェックについて教えてください。
label(.agreement)がクリックされたらtoggleクラスで、.boxに「.checked」というクラスを追加・削除し、
プライバシーチェックのマークを取り外ししたいです。
当初以下、コードで書いたところ、うまく動いたのですが、
CSSを修正してるうちに、マウスクリック自体のコードが反応しなくなりました。
（クラス追加・削除が動いてない様です、、）
何がおかしいか、ご指摘いただけないでしょうか？>< よろしくお願いします。
--13:04分追記：
クラス：form_2matomeにoverflow:hiddenをかけていると機能しないことまで調べられました。
なぜ、overflow:hiddenをかけると、
.agrementのクリックが効かないのでしょうか？
よろしくお願いします。
html
1<body> 2 <div class="form_2matome"> 3 <div id="privacy btm_half"> 4 <dl class="form-dl"> 5 <dd> 6 <label class="agreement"> 7 <span class="box centering"></span> 8 <span class="t">プライバシーポリシーに同意します</span> 9 </label> 10 </dd> 11 </dl> 12 </div> 13 14 <div class="text-right btm_half"> 15 <dl class="form-dl submit_flame"> 16 <dd> 17 <button type="submit" name="submit" value="submit" class="btn normal dark"> 18 Submit 19 </button> 20 </dd> 21 </dl> 22 </div> 23</div> 24 25 26<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 27<script> 28 $('.agreement').click(function() { 29 $('.box').toggleClass('checked'); 30 }) 31</script> 32</body> 33 34css---- 35 36.box{ 37 width: 32px; 38 border: solid 0.5px gray; 39 border-radius: 4px; 40 height: 32px; 41 margin-right: 14px; 42 display: block; 43 clear: both; 44} 45.box::before{ 46 content: ''; 47 display: block; 48 width: 20px; 49 height: 20px; 50 background:url(../../image/stamp2.png)no-repeat center; 51 background-size: contain; 52 margin: 2px auto; 53 opacity: 0; 54} 55.checked::before{ 56 opacity:1; 57} 58.agreement span{ 59 display: inline-block; 60 line-height: 32px; 61 float: left 62} 63.agreement{ 64 overflow: hidden; 65} 66#privacy{ 67 overflow: hidden; 68 margin-top: 50px; 69} 70.btn{ 71 width: 130px; 72 padding: 8px; 73 font-size: 2.1vw; 74 border-radius: 3px; 75 margin-right: 0; 76} 77.btm_half{ 78 height: 150px; 79} 80.text-right{ 81 position: relative; 82} 83.submit_flame{ 84 position: absolute; 85 top:0; 86 right: 0; 87}
回答4件
0
ベストアンサー
checkedのトグルは正常にできています。
checked時のスタイル（CSS）が足りてないだけではないでしょうか。
追記
../../image/stamp2.pngを持っていないので、適当な画像に変えて試してみましたけど、
ちゃんと画像の表示と非表示がクリック毎に変わってますよ。
特に問題が見当たりません。
投稿2018/10/30 04:08
編集2018/10/30 04:19
総合スコア4666
0
まさかと思いますが、この辺り、checkboxのタグ自体を削除してしまっていませんか？
html
1 <label class="agreement"> 2 <span class="box centering"></span> 3 <span class="t">プライバシーポリシーに同意します</span> 4 </label>
--- 追記 ---
デベロッパーツールで見るとクリックのたびに、
html
1<span class="box centering"></span>
が
html
1<span class="box centering checked"></span>
になるので、javascriptは動いてますね。
投稿2018/10/30 04:04
編集2018/10/30 04:20
総合スコア798
標準のcheckboxは見た目がダサいので、自作でチェックボックスっぽい見た目を実装することは普通ですから問題ないです。
ただし、あくまでも見た目だけの話しなので、フォームから値をサブミットしたいのであれば、何らかのinput項目は必要になります。hiddenや非表示にしたcheckboxなどです。
clickの処理時にcheckedクラスをトグルすると同時に、これらのinput項目に値を設定しておくという形ですね。
見た目だけなら、input はなくてもいいですが、フォームで飛ばすなら見えなくしてそこに置いておくのがいいですね。
>root_jpさん
ですね。
form_2matomeにoverflow:hiddenを設定してもスクリプトは動いてますね。
画像URLを間違えてて見えてないとかでしょうかねぇ？
ご丁寧にありがとうございますm(><)m
フォームで飛ばすようにしっかりinputタグで実装すること、イメージできました。
何起因かわからないのですが、何かが邪魔しているようでして
もし差し支えなければ、クリックを止めている理由をご指摘いただけると幸いです＞＜
http://moon-woof.site/about/contact/contact.html?name=&email=&subject=&message=&submit=submit
このアップした内容ですと、
form_2matomeのoverflow:hiddenを外すとチェックができるんです、、
<div class=“text-right btm_half”> がクリックしたい場所の真上にかぶっているみたいですね。
overflow:hiddenを外すと、<div class=“text-right btm_half”>が移動するので押せるようになるみたいです。
0
CSSにもjQueryにも特に問題はないようです。
動いていないように見えるのは、やはり、.checkedのCSSが消えているか、画像のリンクがおかしいか、ではないかと。
投稿2018/10/30 06:51
総合スコア27
0
(1)checkboxタグをspanに変えちゃったか、
(2).checkedのスタイルが指定されていないか。
イベント自体は動いてます。デバッガで確認してみてください。
(1)を直す場合は次の通り。
html
1<input type='checkbox' class="box centering"></input> 2<span class="t">プライバシーポリシーに同意します</span>
ブロックとインライン要素が並んでいるので、見た目が想定どうりにならないと思います。
並びを直すのはflexかなにかでうまいことやってください。
投稿2018/10/30 04:09
編集2018/10/30 04:16
退会済みユーザー
総合スコア0
ご回答ありがとうございます＞＜
(2)のスタイル設定はできてまして、、
どうやら、form_2matomeにoverflow:hiddenが邪魔して動かない？様です。
この設定を外すとうまく動きました。
またchecboxタグを付与する場合は、
<input type='checkbox' class="box centering">だけで良いですかね。。＞＜？
そのあとに、spanの終了タグが来ていたのでこれは何だろうと思いまして、、
> form_2matomeにoverflow:hidden....
とありますが、記載されているコードにそのような設定はなかったような…。
また、仮にそれがあっても、イベント自体は発火しています。
デバッガで確認してみてください。
spanは記載ミスです、ごめんなさい＞＜
<intpu ... />ですね。
事前に記載内容に、cssがしっかり入っておらずすみませんでした。
検証（デバックとは開発者ツール、検証のことでいいですよね？）で確認しましたが、クリック・トグルが動いて無いようです＞＜
overflow:hiddenでは無いのかもしれませんが、何かが影響しているようです、、
サーバーに、ファイルをアップしましたので、もし差し支えなければ、見ていただけたらと存じます。
http://moon-woof.site/about/contact/contact.html?name=&email=&subject=&message=&submit=submit
このアップした内容ですと、
form_2matomeのoverflow:hiddenを外すとチェックができるんです、、
うーん。お手上げです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/30 04:22
2018/10/30 04:32
2018/10/30 05:01
2018/10/30 05:06
2018/10/30 05:31
2018/10/30 05:42
退会済みユーザー
2018/10/30 05:49