ラジオボタンは２つ以上のinputで組み合わせ、どれかを選択すれば選択したものにチェックが入り、他のものに入っていたものは外れるという仕組みのもの。
しかし、これは一度選択するとリセットしないと消えず、更新ボタン押してもチェックしたままということはよくある動作。
リセットボタンを付けても正常に動かない場合もあれば、押すと他のフォームの情報も消える恐れがあり、多くのフォーム項目があるものにリセットボタンは利用する側からすればちょっと怖い。
そこで、ラジオボタンボタンの動作として、チェックが入っているものに関して再度クリックするとチェックが消えるという動作にすればいいと思い、jQueryで機能を実装してみた。
jQuery( function( $ ) {
// チェックされているinputのデータ
var check = $("input:checked").val();
$("input").on("click", function(){
// 今回クリックしたinputのデータと比較
if($(this).val() == check) {
// 同じinputならcheckを外す
$(this).prop("checked", false);
check = "";
} else {
// 違うinputならcheckを入れる
$(this).prop("checked", true);
check = $(this).val();
}
});
});