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枚目送信を押した後の結果です。
魚を押しているのに、お肉の項目(牛肉)が表示されているってことです。
まだ回答がついていません
会員登録して回答してみよう