<input type="checkbox" id="a1" name="color3" value="1">
<label for="a1" class="checkbox01">モーニング</label>
<input type="checkbox" id="a2" name="color3" value="2">
<label for="a2" class="checkbox01">ランチ</label>
<input type="checkbox" id="a3" name="color3" value="3">
<label for="a3" class="checkbox01">ディナー</label>
<input type="checkbox" id="a4" name="color3" value="4">
<label for="a4" class="checkbox01">その他</label>
<input type="button" id="button3" value="ボタン" />
<input type="button" id="buttonc" value="クリア" />
<br /><textarea class="text4" id="span3"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const colors = [];
$("#button3").click(function () {
colors.length = 0;
$(':checkbox[name="color3"]:checked').each(function () {
colors.push($(this).val());
$("#span3").text(colors).text(vals).replace(/,/g, '');
});
});
$("#buttonc").click(function() {
$("#span3").text("");
});
</script>
その2
<input type="checkbox" id="a249" name="hoge" value="ホルモン">
<label for="a249" class="checkbox01">ホルモン</label>
<input type="checkbox" id="a252" name="hoge" value="鶏皮激辛揚げ">
<label for="a252" class="checkbox01">鶏皮激辛揚げ</label>
<input type="checkbox" id="a253" name="hoge" value="フライドオニオンおにぎり">
<label for="a253" class="checkbox01">フライドオニオンおにぎり</label>
<script>
$(function(){
$('input[name=hoge]').on('change', function(){
/// チェックされたvalue値を配列として取得
var vals = $('input[name=hoge]:checked').map(function(){
return $(this).val();
}).get();
$("#span4").text(vals).replace(/,/g, '');
//var result = text(vals).replace(/,/g, '');
//$("#span4").text(result);
});
});
$("#buttonc111").click(function() {
$("#span4").text("");
});
</script>
<br /><textarea class="text4" id="span4"></textarea>
コメント