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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

送信ボタンを押下するとチェックを入れたものだけ本文に表示

Tanimican
Tanimican

総合スコア27

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

-2評価

0クリップ

198閲覧

投稿2022/06/21 11:47

編集2022/06/22 13:44

イメージ説明

html

<!-- modal open --> <a class="js-modal-open" href="" data-target="modal01">モーダルウィンドウを開く</a> <!-- ./modal open --> <p>HELLO</p> <div id="test"></div> <div id="test2"></div> <!-- modal --> <div id="modal01" class="c-modal js-modal"> <!--<form role="form" action="" method="post">--> <div class="c-modal_bg js-modal-close"></div> <div class="c-modal_content _lg"> <div class="c-modal_content_inner"> <!--ここにモーダルウィンドウの内容が入ります--> <br>予算 <input type="text" id="yosan" name="yosan"> <p> <input type="checkbox" name="shopping" id="c1" value="お肉">お肉 <input type="checkbox" name="shopping" id="c2" value=""> <input type="checkbox" name="shopping" id="c3" value=""> <input type="checkbox" name="eating" id="c4" value=""> </p> <p><input type="button" id="button5" value="全ONボタン" /></p> <p><input type="button" id="button6" value="全OFFボタン" /></p> <a class="js-modal-close c-modal_close" href=""> <br>閉じる </a> <button type="submit" class="btn btn-primary" id="chgDateSub" name="soushin" value="dateup">送信する</button> </div> </div>

jquery

$('#chgDateSub').on('click', function() { $('input[type=checkbox]:checked').each(function(){ var value = '<span>'+$(this).val()+'</span>'; $(value).appendTo($('p')); }); });

モーダルウィンドウをしています。
モーダルウィンドウにチェックボックスは入っています。そこで"お肉"、"魚"、"卵"、"芋"それぞれチェックして送信ボタンを押すと本文の方にそれぞれお肉、魚など表示させたいです。
今このコードだと本文にお肉魚など表示されますが、モーダルウィンドウの方にもお肉魚と表示されてしまいます。本文にのみ表示させたいです。どこを修正したらよろしいでしょうか

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。