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

Question

<!-- 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>

            $(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);
});
ここから重複されてチェックしてもお肉の部分しか表示されなくなり、この場合どうしたらよろしいですか？

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

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

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

Comments

[yambejp]

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

チェック状態で全OFFしてもセレクトボックスが消えないのをなんとかしたいのでしょうか？

Answer 1

「name=shoppingかname=eatingの一つでもチェックがあれば送信ボタンが押せるようになる」
という仕様であれば以下

<script>
$(function(){
  var chk=$("[name=shopping],[name=eating]");
  chk.on('change',function(){
    $('#chgDateSub').prop('disabled',!chk.is(':checked'));
  }).eq(0).trigger('change');
});
</script>
<form>
<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="芋">芋
<button type="submit" class="btn btn-primary" id="chgDateSub" name="soushin" value="dateup">送信する</button>
</form>

modal処理

以下がmodalの基本になります
あとは何をどうしたときに、どこに何をどうしたいのか？をはっきりしてください

<style>
dialog::backdrop{
  background-Color:rgba(255,0,0,0.7);
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.js-modal-open').addEventListener('click',e=>{
    e.preventDefault();
    modal01.showModal();
  });
  chgDateSub.addEventListener('click',e=>{
    e.preventDefault();
    let v=document.querySelector('[name=shopping]:checked,[name=eating]:checked')?.value??"";
    if(v=="お肉") v=m11.value;
    test.textContent=v;
    modal01.close();
  });
  chgDateSub.addEventListener('click',e=>{
    e.preventDefault();
    test.textContent=document.querySelector('[name=shopping]:checked,[name=eating]:checked')?.value??"";
    modal01.close();
  });
  closeModal.addEventListener('click',e=>{
    e.preventDefault();
    modal01.close();
  });
    
});
</script>
<a class="js-modal-open" href="#" data-target="modal01">モーダルウィンドウを開く</a>
<p>HELLO</p>
<div id="test"></div>
<div id="test2"></div>
<dialog id="modal01">
<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>

<button type="button" id="closeModal" >閉じる</button>
<button type="submit" id="chgDateSub" name="soushin" value="dateup" disabled>送信する</button>
</div>
</dialog>

Comments

[Tanimican]

送信ボタンを押すと<div id="test"></div>に表示させたいです。
例えば、魚にチェック入れて送信押すと、＃testの欄に魚と表示させたいです。
今のコードだと、牛肉が優先されて他のチェックを入れても牛肉と表示されます。

[yambejp]

送信する＝ページ遷移するのですよね？
受け取った側のサーバーサイドプログラムはなにか想定していますか？
jsで受け取るつもりですか？(localStorage？）

[Tanimican]

モーダルウィンドウを開く前のページに表示させたいです、

[yambejp]

ごめんなさい、意味がわかりません
ページは移動するのですか？しないのですか？
ページを移動しないのであれば送信しないということでよいですか？
前回自己解決とされていましたがそもそもモーダル処理になってませんよ

[Tanimican]

すいません、説明不足でした。
前回のは講師に送信したところokをもらえたので解決したと思っていました。
画像を追加しました。アニメーションの仕方はわからなかったのでこの形でしています。

[yambejp]

モーダル処理はここにきてfirefoxでもようやく仕様が統一されたので
dialogタグにて処理することをおすすめします。
もともと優勢だったjQuery-uiのdialog処理は、uiのサポート終了とともに
非推奨な機能になりました

[Tanimican]

わかりました
やりたかったことは、Jqueryで解決すること。
今は、お肉以外のチェック部分（魚、卵）とかをチェックして送信すると、牛肉と表示されてしまっている。
これを（魚、卵）などをチェックして送信した場合、魚、卵と表示できるようにしたいということでした。

[yambejp]

一部修正しました。
お肉にチェック＝お肉で選ばれた肉の種類が表示
魚にチェック＝魚が表示
お肉と魚にチェック＝お肉で選ばれた肉の種類が表示
という仕組みにしておきました

nameが同じチェックボックスを使う限り競合は防げません。
競合したときにどう処理をしたいかよくよく仕様を検討した方がよいでしょう

[Tanimican]

了解しました。
Jqueryで書くとどうなるのですか？