今更ながらですが、簡単なフォームならjQueryでバリデーションして、フォームにエラーを出したりしたいですよね。
その時にラジオボタンがどれも選択されていない状態だったらバリデーションエラーにしたい、つまりユーザーが必ず意思を持ってラジオボタンを選択して欲しい、ということがあります。
そんな時、どのように書きますか?
以下のようなHTMLがあります。
<label><input type="radio" name="payment" value="銀行振込"> 銀行振込</label>
<label><input type="radio" name="payment" value="クレジットカード"> クレジットカード</label>
<label><input type="radio" name="payment" value="PayPay払い">PayPay払い</label>
これを選択されてなかったらバリデーションエラーにしたいわけです。
では、jQueryで書いてみましょう。
方法1
// チェックされている要素の個数を取る
const payment = $('[name="payment"]:checked').length;
if (payment === 0) {
// エラーを表示する・メッセージを変数に入れる等々の処理
}
ラジオボタンなので、$('[name="payment"]:checked').length
は選択されていれば必ず1が返ります。
選択されていなければ0が返ります。
方法2
// チェックされている要素のvalue属性を取得する。チェックされていないと取得できないのでundefinedが返る
const payment = $('[name="payment"]:checked').val();
if (!payment) { // undefinedは否定するとtrueになる。文字が入っていれば否定するとfalseになる
// エラーを表示する・メッセージを変数に入れる等々の処理
}
undefined
の扱い方が胆。 !undefined
が true
になることを覚えておくといいですね。
簡単なことなんだけど初心者には気づきづらいのかも。