jQueryでチェックボックスの状態取得する方法

更新日：2015年10月25日

お問い合わせ画面や会員登録画面を作る際、必須の項目が未入力だった場合にそのまま送信されてきては困りますよね。送信される前に未入力であれば未入力であると、入力して頂くお客様にお知らせしなければなりません。

このページではその方法をご紹介します。

まずHTMLには

	チェックボックス

	

と記述します。
ごくごく一般的なチェックボックスが書き出されます。

1行目のsample.phpは、入力された情報の受取先のファイル名なので、ご自由に変更して下さい。

これは補足ですが、<label for="check">チェックボックス</label>のfor=""の値は連動させたい要素のid属性を入れます。そうすることで、チェックボックス本体をクリックするか、もしくは「チェックボックス」という文字をクリックしたとしてもチェックボックス本体をクリックしたのと同じことになるのです。

また、name="check"の値はcheckである必要はありませんが、id属性と一致させるのが一般的です。name属性はformからデータが送信された際、そのデータが格納される箱の名前のことです。受取先のファイルで、入力された情報を取得する際にname属性を使って呼び出しする為だけに使われるもので、id属性とは何の関連性もないのですが、色々名前がごちゃごちゃしてても混乱するのでid属性と一致させる人が多いというだけのことです。

では話を戻しまして、jQueryには

function chk() {
	if($("#check").prop('checked')) {
		return true;
	}
	else {
		alert("チェックされていません。");
		return false;
	}
}

と記述すればOK。
2つのソースを合わせると、下記のように表示されます。

チェックしていない状態で送信ボタンをクリックするとアラートが表示され、チャックした状態で送信ボタンをクリックすると送信されます。
つまりチェックボックスの状態を取得してから送信するか否かを判断しています。