SHIROI PONZU

2022.9.18

【jQuery】ラジオボタンのチェックをクリックで解除できるようにする

  • CSS
  • お問い合わせフォーム
【jQuery】ラジオボタンのチェックをクリックで解除できるようにする

inputのラジオボタンのチェックをクリックで外れるようになる実装手順をご紹介します。

【jquery】ラジオボタンのチェックをクリックで解除できるようにする

通常ラジオボタンは一度チェックしまうと、ページをリロードする以外チェックを外せない仕様になっています。2度目のクリックで選択を解除するにはjsでの調整が必要です。以下のコードをコピペで実装できます。

 

実装コード

$(function(){
var radio_val;
$('input[type="radio"]').on('click',function(){
if($(this).val() == radio_val) {
$(this).prop('checked', false);
radio_val = null;
} else {
radio_val = $(this).val();
}
});
});

 

上記のコードをフォームが反映されているphpファイルかjsファイルに記述すれば実装完了です。きちんと機能しているか確認してみましょう◎

 

Share Please

Read this too