内容へ移動
ゆーものメモ帳
ユーザ用ツール
管理
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 【jQuery】フォームの値(input、selectなど)の操作 ====== コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。 ===== input text の操作 ===== <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> <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> </code> ===== radio、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="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> </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(''); }); }); </script> </body> </html> </code>
プログラム言語/javascript_jquery/フォームの値_input_selectなど_の操作.txt
· 最終更新: 2021/04/15 16:34 by
humolife
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ