ゆーものメモ帳

ユーザ用ツール

サイト用ツール

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

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2019/05/21 12:01]
yusuke_komori 		プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2021/04/15 16:34] (現在)
humolife
行 1: 行 1:
 ====== 【jQuery】フォームの値（input、selectなど）の操作 ====== ====== 【jQuery】フォームの値（input、selectなど）の操作 ======
 コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。 コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。
-===== input の値（value）の操作 =====+===== input text の操作 =====
 <code> <code>
 <html> <html>
行 9: 行 9:
 </meta> </meta>
 <body> <body>
 +
 <input type="text" name="hoge" value="" id="input-01" class="form-hoge"> <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-change">change</button>
 <button type="button" class="form-clear">clear</button> <button type="button" class="form-clear">clear</button>
 +
 <script> <script>
 $(function() { $(function() {
行 43: 行 45:
 </code> </code>
  
-===== input（チェックボックス、ラジオボタン）の操作 =====+===== radio、checkbox（ラジオボタン、チェックボックス）の操作 =====
 <code> <code>
 <html> <html>
行 51: 行 53:
 </meta> </meta>
 <body> <body>
 +
 性別 性別
-<label><input type="radio" name="figure" value="male" class="form-figure">男性</label> +<label><input type="radio" name="figure" value="male" id="form-figure-male" class="form-figure">男性</label> 
-<label><input type="radio" name="figure" value="female" class="form-figure">女性</label>+<label><input type="radio" name="figure" value="female" id="form-figure-female" class="form-figure">女性</label>
 <button type="button" class="form-change-male">change male</button> <button type="button" class="form-change-male">change male</button>
 <button type="button" class="form-change-female">change female</button> <button type="button" class="form-change-female">change female</button>
 <button type="button" class="form-clear-1">clear 1</button> <button type="button" class="form-clear-1">clear 1</button>
 <button type="button" class="form-clear-2">clear 2</button> <button type="button" class="form-clear-2">clear 2</button>
 +
 <script> <script>
 $(function() { $(function() {
   $('.form-figure').on('change', function(){   $('.form-figure').on('change', function(){
-    // class で値（value）を取得+    // class でチェック中（checked）の value を取得
     let figure_class = $('.form-figure:checked').val();     let figure_class = $('.form-figure:checked').val();
     console.log(figure_class);     console.log(figure_class);
  
-    // name で値（value）を取得+    // name でチェック中（checked）の value を取得
     let figure_name = $('input[name=figure]:checked').val();     let figure_name = $('input[name=figure]:checked').val();
     console.log(figure_name);     console.log(figure_name);
行 71: 行 75:
  
   $('.form-change-male').on('click', function(){   $('.form-change-male').on('click', function(){
-    // チェック状態（checked）の変更+    // チェック状態（checked）を val で変更
     $('input[name=figure]').val(['male']);     $('input[name=figure]').val(['male']);
   });   });
  
   $('.form-change-female').on('click', function(){   $('.form-change-female').on('click', function(){
-    // チェック状態（checked）の変更 +    // チェック状態（checked）を prop で変更 
-    $('input[name=figure]').val(['female']);+    $('#form-figure-female').prop('checked', true);
   });   });
  
   $('.form-clear-1').on('click', function(){   $('.form-clear-1').on('click', function(){
-    // チェック状態（checked）の解除+    // チェック状態（checked）を val で解除
     $('input[name=figure]').val(['']);     $('input[name=figure]').val(['']);
   });   });
  
   $('.form-clear-2').on('click', function(){   $('.form-clear-2').on('click', function(){
-    // チェック状態（checked）の解除+    // チェック状態（checked）を prop で解除
     $('.form-figure').prop('checked', false);     $('.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-status">ステータス</button>
 +
 +<script>
 +$(function() {
 +  $('.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('');
   });   });
 }); });
プログラム言語/javascript_jquery/フォームの値_input_selectなど_の操作.1558407717.txt.gz · 最終更新: 2019/05/21 12:01 by yusuke_komori

ページ用ツール

特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki