差分

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

--- プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2019/05/21 12:22]
yusuke_komori [input（チェックボックス、ラジオボタン）の操作]
+++ プログラム言語: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>
@@ 行 9: / 行 9: @@
 </meta>
 <body>
 <input type="text" name="hoge" value="" id="input-01" class="form-hoge">
 <button type="button" class="form-change">change</button>
 <button type="button" class="form-clear">clear</button>
 <script>
 $(function() {
@@ 行 43: / 行 45: @@
 </code>
-===== input（チェックボックス、ラジオボタン）の操作 =====
+===== radio、checkbox（ラジオボタン、チェックボックス）の操作 =====
 <code>
 <html>
@@ 行 51: / 行 53: @@
 </meta>
 <body>
 性別
 <label><input type="radio" name="figure" value="male" id="form-figure-male" class="form-figure">男性</label>
@@ 行 58: / 行 61: @@
 <button type="button" class="form-clear-1">clear 1</button>
 <button type="button" class="form-clear-2">clear 2</button>
 <script>
 $(function() {
@@ 行 88: / 行 92: @@
     // チェック状態（checked）を prop で解除
     $('.form-figure').prop('checked', false);
+  });
+});
+</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>
+</html>
+</code>
+===== select（セレクトボックス）の操作 =====
+<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>
+<select name="age" class="form-age">
+    <option value="">
+    <option value="1">0～39
+    <option value="2">40～79
+    <option value="3">80～
+</select>
+<button type="button" class="form-change-2">change 40～79</button>
+<button type="button" class="form-change-3">change 80～</button>
+<button type="button" class="form-clear">clear</button>
+<script>
+$(function() {
+  $('.form-age').on('change', function(){
+    // class で選択中の値（value）を取得
+    let age_class = $('.form-age').val();
+    console.log(age_class);
+    // name で選択中の値（value）を取得
+    let age_name = $('select[name=age]').val();
+    console.log(age_name);
+  });
+  $('.form-change-2').on('click', function(){
+    // 選択状態（selected）の変更
+    $('.form-age').val('2');
+  });
+  $('.form-change-3').on('click', function(){
+    // 選択状態（selected）の変更
+    $('select[name=age] option[value=3]').prop('selected', true);
+  });
+  $('.form-clear').on('click', function(){
+    // 選択状態（selected）の解除
+    $('.form-age').val('');
   });
 });

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

差分

ページ用ツール