犬ターネット

通常の場合。ラジオボタン未選択で送信ボタンを押すとブラウザがエラーメッセージを表示してくれる。

<form action="javascript:;">
<p>
<input type="radio" name="radio1" id="id_radio1_1" value="1" required /><label for="id_radio1_1">radio 1</label>
<input type="radio" name="radio1" id="id_radio1_2" value="2" required /><label for="id_radio1_2">radio 2</label>
<input type="submit" value="送信" />
</p>
</form>

radio 1 radio 2

---

こちらは input:radio を display:none で隠し、checked されたときに labelタグの色を変えるcssを適用したもの。ラジオボタン未選択で送信ボタンを押してもエラーメッセージが表示されない。仕様だから仕方ないけれど、エラーメッセージを表示したい、もしくはエラーメッセージの場所をコントロールできるようにしてもらいたい…。

<style>
.cls_radio input[type="radio"]{display:none;}
.cls_radio input[type="radio"]:checked+label{background-color:#0f0;color:#fff;}
</style>
<form action="javascript:;">
<p class="cls_radio">
<input type="radio" name="radio2" id="id_radio2_1" value="1" required /><label for="id_radio2_1">radio 1</label>
<input type="radio" name="radio2" id="id_radio2_2" value="2" required /><label for="id_radio2_2">radio 2</label>
<input type="submit" value="送信" />
</p>
</form>

radio 1 radio 2