jquery チェックBOX

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

コメント

hage01

2008年頃からワードプレス使ってますヴァージョンは2.6か2.8かだったかな?

hage01をフォローする
タイトルとURLをコピーしました