プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

--- プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2019/05/21 12:42]
yusuke_komori
+++ プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2025/10/15 18:22] (現在)
humolife [複数選択可（配列）の checkbox（チェックボックス）の操作]
@@ 行 1: / 行 1: @@
 ====== 【jQuery】フォームの値（input、selectなど）の操作 ======
 コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。
-===== input の値（value）の操作 =====
+===== input text の操作 =====
 <code>
 <html>
@@ 行 45: / 行 45: @@
 </code>
-===== input（チェックボックス、ラジオボタン）の操作 =====
+===== radio、checkbox（ラジオボタン、チェックボックス）の操作 =====
 <code>
 <html>
@@ 行 94: / 行 94: @@
   });
 });
+</script>
+</body>
+</html>
+</code>
+===== 複数選択可（配列）の checkbox（チェックボックス）の操作 =====
+<code>
+<html>
+<meta>
+<meta charset="UTF-8">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+</meta>
+<body>
+<label><input type="checkbox" name="status[]" value="1">あ</label>
+<label><input type="checkbox" name="status[]" value="2">い</label>
+<label><input type="checkbox" name="status[]" value="3">う</label>
+<label><input type="checkbox" name="status[]" value="4">え</label>
+<button type="button" class="btn-checked">チェック</button>
+<button type="button" class="btn-status">ステータス</button>
+<script>
+$(function() {
+  let checked = [1, 3];
+  $('.btn-status').on('click', function(){
+    // val にチェックしたい value の配列をそのまま渡せばOK
+    $('input[name="status[]"]').val(checked);
+  })
+  $('.btn-status').on('click', function(){
+    let status = $('input[name="status[]"]:checked').map(function() {
+      return $(this).val()
+    }).get()
+    console.log(status)
+  })
+})
 </script>
 </body>

プログラム言語/javascript_jquery/フォームの値_input_selectなど_の操作.1558410139.txt.gz · 最終更新: 2019/05/21 12:42 by yusuke_komori