このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 最新のリビジョン 両方とも次のリビジョン | ||
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2019/05/21 12:01] yusuke_komori |
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作 [2020/08/18 11:34] humolife [input(チェックボックス、ラジオボタン)の操作] |
||
---|---|---|---|
行 9: | 行 9: | ||
</ | </ | ||
< | < | ||
+ | |||
<input type=" | <input type=" | ||
<button type=" | <button type=" | ||
<button type=" | <button type=" | ||
+ | |||
< | < | ||
$(function() { | $(function() { | ||
行 51: | 行 53: | ||
</ | </ | ||
< | < | ||
+ | |||
性別 | 性別 | ||
- | < | + | < |
- | < | + | < |
<button type=" | <button type=" | ||
<button type=" | <button type=" | ||
<button type=" | <button type=" | ||
<button type=" | <button type=" | ||
+ | |||
< | < | ||
$(function() { | $(function() { | ||
$(' | $(' | ||
- | // class で値(value)を取得 | + | // class でチェック中(checked)の value を取得 |
let figure_class = $(' | let figure_class = $(' | ||
console.log(figure_class); | console.log(figure_class); | ||
- | // name で値(value)を取得 | + | // name でチェック中(checked)の value を取得 |
let figure_name = $(' | let figure_name = $(' | ||
console.log(figure_name); | console.log(figure_name); | ||
行 71: | 行 75: | ||
$(' | $(' | ||
- | // チェック状態(checked)の変更 | + | // チェック状態(checked)を val で変更 |
$(' | $(' | ||
}); | }); | ||
$(' | $(' | ||
- | // チェック状態(checked)の変更 | + | // チェック状態(checked)を prop で変更 |
- | $('input[name=figure]').val(['female']); | + | $('#form-figure-female').prop('checked', true); |
}); | }); | ||
$(' | $(' | ||
- | // チェック状態(checked)の解除 | + | // チェック状態(checked)を val で解除 |
$(' | $(' | ||
}); | }); | ||
$(' | $(' | ||
- | // チェック状態(checked)の解除 | + | // チェック状態(checked)を prop で解除 |
$(' | $(' | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== input(チェックボックス)の操作 ===== | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <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)の解除 | ||
+ | $(' | ||
}); | }); | ||
}); | }); |