サイドバー
プログラム言語:javascript_jquery:フォームの値_input_selectなど_の操作
目次
【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>
プログラム言語/javascript_jquery/フォームの値_input_selectなど_の操作.txt · 最終更新: 2021/04/15 16:34 by humolife
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
コメント