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

差分

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

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

--- プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2020/08/18 11:34]
humolife [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>
@@ 行 45: / 行 45: @@
 </code>
-===== input（チェックボックス、ラジオボタン）の操作 =====
+===== radio、checkbox（ラジオボタン、チェックボックス）の操作 =====
 <code>
 <html>
@@ 行 100: / 行 100: @@
-===== input（チェックボックス）の操作 =====
+===== 複数選択可（配列）の checkbox（チェックボックス）の操作 =====
 <code>
 <html>
@@ 行 112: / 行 112: @@
 <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() {

プログラム言語/javascript_jquery/フォームの値_input_selectなど_の操作.1597718042.txt.gz · 最終更新: 2020/08/18 11:34 by humolife