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

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

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

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

受付中

クリックイベントが重複されている場合

Tanimican
Tanimican

総合スコア27

jQuery

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

1回答

-1評価

0クリップ

232閲覧

投稿2022/06/24 05:09

編集2022/06/24 19:27

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="お肉">お肉 <select name="meat" id="m11"> <option value="牛肉">牛肉</option> <option value="豚肉">豚肉</option> <option value="鶏肉">鶏肉</option> </select> <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> <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

$(function(){ $('#button5').on('click',function(){ $('input:checkbox[name="shopping"]').val(["お肉","魚","卵"]); }); $('#button6').on('click', function(){ $('input:checkbox[name="shopping"]').prop('checked',false); $('input:checkbox[name="eating"]').prop('checked',false); }); $('#chgDateSub').on('click', function(){ $('input[type=checkbox]:checked').each(function(){ var value = '<span>'+$(this).val()+'</span>'; $(value).appendTo($('#test')); }); }); $('#chgDateSub').on('click', function(){ $('input[type=radio]:checked').each(function(){ var value = '<span>'+$(this).val()+'</span>'; $(value).appendTo($('#test')); }); }); $('#chgDateSub').on('click', function() { var str = $('#m11 option:selected').text(); $('#test').text(str); }); $('#m11').hide(); $('#c1').on('click', function(){ $('#m11').slideToggle(this.checked); }); });

チェックボックスを使って、チェックを入れて送信ボタンを押下すると表示させるようにしていました。
ですが、
$('#chgDateSub').on('click', function() {
var str = $('#m11 option:selected').text();
$('#test').text(str);
});
$('#m11').hide();
$('#c1').on('click', function(){
$('#m11').slideToggle(this.checked);
});
ここから重複されてチェックしてもお肉の部分しか表示されなくなり、この場合どうしたらよろしいですか?

魚、卵、芋の部分がチェックを入れても送信できません。この部分にチェックを入れて送信した場合、牛肉と表示されます。
ここの魚、卵、芋が表示できるようにしたいです。
イメージ説明
イメージ説明
イメージ説明

1枚目が本文です。
2枚目は魚を送信しようとしています。
3枚目送信を押した後の結果です。

魚を押しているのに、お肉の項目(牛肉)が表示されているってことです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

yambejp

2022/06/24 05:17 編集

何をしたときにどうなる想定か、もうすこし丁寧に説明してください。 とりあえず動作は安定していませんが「お肉」をチェックに連動して 牛・豚・鶏のセレクトボックスが表示/非表示されるのはわかりますが その他のチェックボックスはどうしたいのでしょうか? チェック状態で全OFFしてもセレクトボックスが消えないのをなんとかしたいのでしょうか?

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

jQuery

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