フォーム関連の取得や判別方法のまとめ

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(['青森県', '岩手県']);
	});
});

セレクト(multiple)のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930