このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2019/05/21 11:39] yusuke_komori 作成 |
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2021/04/15 16:34] (現在) humolife |
||
---|---|---|---|
行 1: | 行 1: | ||
====== 【jQuery】フォームの値(input、selectなど)の操作 ====== | ====== 【jQuery】フォームの値(input、selectなど)の操作 ====== | ||
- | ===== input の値(value)の操作 ===== | ||
コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。 | コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。 | ||
+ | ===== input text の操作 ===== | ||
< | < | ||
< | < | ||
行 9: | 行 9: | ||
</ | </ | ||
< | < | ||
+ | |||
<input type=" | <input type=" | ||
<button type=" | <button type=" | ||
<button type=" | <button type=" | ||
+ | |||
< | < | ||
$(function() { | $(function() { | ||
行 43: | 行 45: | ||
</ | </ | ||
+ | ===== radio、checkbox(ラジオボタン、チェックボックス)の操作 ===== | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | 性別 | ||
+ | < | ||
+ | < | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | |||
+ | < | ||
+ | $(function() { | ||
+ | $(' | ||
+ | // class でチェック中(checked)の value を取得 | ||
+ | let figure_class = $(' | ||
+ | console.log(figure_class); | ||
+ | |||
+ | // name でチェック中(checked)の value を取得 | ||
+ | let figure_name = $(' | ||
+ | console.log(figure_name); | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // チェック状態(checked)を val で変更 | ||
+ | $(' | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // チェック状態(checked)を prop で変更 | ||
+ | $('# | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // チェック状態(checked)を val で解除 | ||
+ | $(' | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // チェック状態(checked)を prop で解除 | ||
+ | $(' | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 複数選択可(配列)の checkbox(チェックボックス)の操作 ===== | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <button type=" | ||
+ | |||
+ | < | ||
+ | $(function() { | ||
+ | $(' | ||
+ | let status = $(' | ||
+ | return $(this).val() | ||
+ | }).get() | ||
+ | console.log(status) | ||
+ | }) | ||
+ | }) | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== select(セレクトボックス)の操作 ===== | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <select name=" | ||
+ | <option value=""> | ||
+ | <option value=" | ||
+ | <option value=" | ||
+ | <option value=" | ||
+ | </ | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | <button type=" | ||
+ | |||
+ | < | ||
+ | $(function() { | ||
+ | $(' | ||
+ | // class で選択中の値(value)を取得 | ||
+ | let age_class = $(' | ||
+ | console.log(age_class); | ||
+ | |||
+ | // name で選択中の値(value)を取得 | ||
+ | let age_name = $(' | ||
+ | console.log(age_name); | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // 選択状態(selected)の変更 | ||
+ | $(' | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // 選択状態(selected)の変更 | ||
+ | $(' | ||
+ | }); | ||
+ | |||
+ | $(' | ||
+ | // 選択状態(selected)の解除 | ||
+ | $(' | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||