【jQuery/javascript】チェックボックスやセレクトボックスが入力または選択されているかを判定させる方法

フォーム画面のページで

チェックボックスがチェックされているか？

セレクトボックスが選択されているか？

などユーザーの入力状態や選択状態を判断したい場合があると思います。

今回はチェックボックスやセレクトボックスが入力または選択されているかを判断させる場合の方法について紹介していきたと思います。

チェックボックスとセレクトボックスの状態を調べる

jQueryを使った書き方

html

<div class="box">
	<input type="text" value="" placeholder="入力してください">
	<select>
		<option value="">指定なし</option>
		<option value="1">セレクト1</option>
		<option value="2">セレクト2</option>
		<option value="3">セレクト3</option>
	</select>
	<span></span>
</div>

js

チェックボックス

jQuery('.box input, .box select').on('change', function () {
  /* チェックボックスとセレクトボックスの値が変更されたとき */  
});

jQueryでのchangeメソッドを使うことでチェックボックスとセレクトボックスの値が変更されたとき

をリアルタイムで判定することができます。

それでは次にチェックボックスとセレクトボックスが入力または選択されたときに「入力されています」を表示して未入力または未選択のときに「未入力です」を表示されます。

jQuery(function () {
	let check_input = jQuery('.box input'), check_select = jQuery('.box select');

	jQuery('.box input, .box select').on('change', function () {
		if (check_input.val() != "" || check_select.val() != "" ) {
			jQuery('.box span').text('入力されています');
		}else{
			jQuery('.box span').text('未入力です');
		}
	});
});

サンプル

javascriptを使って値の変更をチェックする方法

javascriptでinputやselectboxの値が変更されたときをチェックする方法としてaddEventListenerイベントを使う方法があります。

html

<div class="box">
	<h2>テキストエリア</h2>
	<p><input type="text" id="textarea"></p>
</div>

<div class="box">
	<h2>セレクトボックス</h2>
	<select id="selectarea">
		<option value="">選択してください</option>
		<option value="テキストエリア1">テキストエリア1</option>
		<option value="テキストエリア2">テキストエリア2</option>
		<option value="テキストエリア3">テキストエリア3</option>
	</select>
</div>

<div class="box">
	<h2>ラジオボタン</h2>
	<p>
		<input type="radio" id="radio1" name="radio" value="ラジオボタン1" checked>
		<label for="radio1">ラジオボタン1</label>
	</p>
	<p>
		<input type="radio" id="radio2" name="radio" value="ラジオボタン2">
		<label for="radio2">ラジオボタン2</label>
	</p>
	<p>
		<input type="radio" id="radio3" name="radio" value="ラジオボタン3">
		<label for="radio3">ラジオボタン3</label>
	</p>
</div>

javascript

function ChangeEvent(){
        alert('内容が変更されました。')
}

let textarea = document.getElementById('textarea');     
textarea.addEventListener('change', ChangeEvent);
       
let selectarea = document.getElementById('selectarea'); 
selectarea.addEventListener('change', ChangeEvent);
       
let radio1 = document.getElementById('radio1'); 
radio1.addEventListener('change', ChangeEvent);
       
let radio2 = document.getElementById('radio2'); 
radio2.addEventListener('change', ChangeEvent);
       
let radio3 = document.getElementById('radio3'); 
radio3.addEventListener('change', ChangeEvent);

addEventListenerイベントのchangeを使うことでinputやselectboxの値が変更されたときをチェックすることができます。

上記の例だと値が変更されたときに画面上にalertが表示されます。

サンプル