目次

【jQuery】フォームの値（input、selectなど）の操作

コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。

input text の操作

<html>
<meta>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</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() {
  $('.form-hoge').on('change', function(){
    // id で value を取得
    let hoge_id = $('#input-01').val();
    console.log(hoge_id);

    // class で value を取得
    let hoge_class = $('.form-hoge').val();
    console.log(hoge_class);

    // name で value を取得
    let hoge_name = $('input[name=hoge]').val();
    console.log(hoge_name);
  });

  $('.form-change').on('click', function(){
    // value の変更
    $('.form-hoge').val('abc');
  });

  $('.form-clear').on('click', function(){
      // value を空にする
      $('.form-hoge').val('');
  });
});
</script>
</body>
</html>

radio、checkbox（ラジオボタン、チェックボックス）の操作

<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="radio" name="figure" value="male" id="form-figure-male" 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-female">change female</button>
<button type="button" class="form-clear-1">clear 1</button>
<button type="button" class="form-clear-2">clear 2</button>

<script>
$(function() {
  $('.form-figure').on('change', function(){
    // class でチェック中（checked）の value を取得
    let figure_class = $('.form-figure:checked').val();
    console.log(figure_class);

    // name でチェック中（checked）の value を取得
    let figure_name = $('input[name=figure]:checked').val();
    console.log(figure_name);
  });

  $('.form-change-male').on('click', function(){
    // チェック状態（checked）を val で変更
    $('input[name=figure]').val(['male']);
  });

  $('.form-change-female').on('click', function(){
    // チェック状態（checked）を prop で変更
    $('#form-figure-female').prop('checked', true);
  });

  $('.form-clear-1').on('click', function(){
    // チェック状態（checked）を val で解除
    $('input[name=figure]').val(['']);
  });

  $('.form-clear-2').on('click', function(){
    // チェック状態（checked）を prop で解除
    $('.form-figure').prop('checked', false);
  });
});
</script>
</body>
</html>

複数選択可（配列）の checkbox（チェックボックス）の操作

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

select（セレクトボックス）の操作

<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('');
  });
});
</script>
</body>
</html>