form関連の取得や判別をする時にいつもググっているので、備忘録のためにやり方をまとめてみます。
入力エリア
HTML
<dl> <dt>氏名</dt> <dd> <input id="sample" type="text" name="name" size="30" /> </dd> </dl> <div class="btn"> <button id="btn">テキスト取得</button> </div>
JavaScript
$(function() {
// フォーカス時
$('#sample').on('focus', function() {
console.log('focus');
});
// ブラー時
$('#sample').on('blur', function() {
console.log('blur');
});
// valueの取得
$('#btn').on('click', function() {
console.log($('#sample').val());
});
});
ラジオボタン
HTML
<dl> <dt>性別</dt> <dd> <label for="man"> <input type="radio" name="gender" value="男" id="man" />男 </label> <label for="woman"> <input type="radio" name="gender" value="女" id="woman" />女 </label> </dd> </dl> <div class="btn"> <button id="btn1">選択したvalue取得</button> <button id="btn2">チェックが入っているかどうか</button> <button id="btn3">男にチェックを入れる</button> <button id="btn4">チェックを外す</button> </div>
JavaScript
$(function() {
// ラジオボタン変更時
$('[name=gender]').on('change', function() {
console.log('change');
});
// 選択しているvalue取得
$('#btn1').on('click', function() {
console.log($('[name=gender]:checked').val());
});
// 選択されているか判定
$('#btn2').on('click', function() {
if($('[name=gender]:checked').prop('checked')) {
console.log('checked');
} else {
console.log('not checked');
}
});
// ラジオボタンにチェック追加
$('#btn3').on('click', function() {
$('[name=gender]').eq(0).prop('checked', true);
});
// ラジオボタンからチェックを外す
$('#btn4').on('click', function() {
$('[name=gender]:checked').prop('checked', false);
});
});
チェックボックス
HTML
<dl> <dt>時間帯</dt> <dd> <label for="hour1"> <input type="checkbox" name="hour" value="0:00～6:00" id="hour1" />0:00～6:00 </label> <label for="hour2"> <input type="checkbox" name="hour" value="6:00～12:00" id="hour2" />6:00～12:00 </label> <label for="hour3"> <input type="checkbox" name="hour" value="12:00～18:00" id="hour3" />12:00～18:00 </label> <label for="hour4"> <input type="checkbox" name="hour" value="18:00～24:00" id="hour4" />18:00～24:00 </label> </dd> </dl> <div class="btn"> <button id="btn1">選択したvalue取得</button> <button id="btn2">チェックが入っているかどうか</button> <button id="btn3">6:00～12:00にチェックを入れる</button> <button id="btn4">チェックを全て選択</button> <button id="btn5">チェックを全て外す</button> </div>
JavaScript
$(function() {
// チェックボックス変更時
$('[name=hour]').on('change', function() {
console.log('change');
});
// 選択しているvalue取得
$('#btn1').on('click', function() {
$('[name=hour]:checked').each(function() {
console.log($(this).val());
});
});
// 選択されているか判定
$('#btn2').on('click', function() {
if($('[name=hour]:checked').prop('checked')) {
console.log('checked');
} else {
console.log('not checked');
}
});
// 指定したチェックボックスにチェックを入れる
$('#btn3').on('click', function() {
$('[name=hour]').eq(1).prop('checked', true);
});
// 全てのチェックボックスにチェックを入れる
$('#btn4').on('click', function() {
$('[name=hour]').prop('checked', true);
});
// 全てのチェックボックスからチェックを外す
$('#btn5').on('click', function() {
$('[name=hour]:checked').prop('checked', false);
});
});
セレクト
HTML
<dl> <dt>氏名</dt> <dd> <select name="prefectures" id="prefectures"> <option value="">都道府県をお選びください</option> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="秋田県">秋田県</option> ～略～ <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </select> </dd> </dl> <div class="btn"> <button id="btn1">選択したvalue取得</button> <button id="btn2">選択したテキスト取得</button> <button id="btn3">選択しているかどうか</button> <button id="btn4">沖縄を選択する</button> </div>
JavaScript
$(function() {
// セレクト変更時
$('#prefectures').on('change', function() {
console.log('change');
});
// 選択しているvalue取得
$('#btn1').on('click', function() {
console.log($('#prefectures').val());
});
// 選択しているテキスト取得
$('#btn2').on('click', function() {
console.log($('#prefectures option:selected').text());
});
// 選択されているか判定
$('#btn3').on('click', function() {
if($('#prefectures').val() != '') {
console.log('selected');
} else {
console.log('not selected');
}
});
// 指定した項目を選択
$('#btn4').on('click', function() {
$('#prefectures').val('沖縄県');
});
});
セレクト(multiple)
HTML
<dl> <dt>氏名</dt> <dd> <select name="prefectures" id="prefectures" multiple="multiple"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="秋田県">秋田県</option> ～略～ <option value="鹿児島県">鹿児島県</option> <option value="沖縄県">沖縄県</option> </select> </dd> </dl> <div class="btn"> <button id="btn1">選択したvalue取得</button> <button id="btn2">選択したテキスト取得</button> <button id="btn3">北海道を選択する</button> <button id="btn4">青森県と岩手県を選択する</button> </div>
JavaScript
$(function() {
// セレクト変更時
$('#prefectures').on('change', function() {
console.log('change');
});
// 選択しているvalue取得
$('#btn1').on('click', function() {
console.log($('#prefectures').val());
});
// 選択しているテキスト取得
$('#btn2').on('click', function() {
$('#prefectures option:selected').each(function() {
console.log($(this).text());
});
});
// 指定した項目を選択
$('#btn3').on('click', function() {
$('#prefectures').val('北海道');
});
// 指定した項目を選択
$('#btn4').on('click', function() {
$('#prefectures').val(['青森県', '岩手県']);
});
});
【参考サイト】
- 【jQuery】フォーム部品の取得・設定まとめ – Qiita
- jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 – knt45の日記
コメントが承認されるまで時間がかかります。