旅行HOMEjQuery【jQuery】ラジオボタンのチェックを外す方法(2回クリックでchecked解除)【jQuery】ラジオボタンのチェックを外す方法(2回クリックでchecked解除)2020.02.08jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、チェック済みのラジオボタンをクリックすると、checkedを解除するjQueryのスクリプトをご紹介しています。フォーム等でよく見かけるラジオボタンは、初期状態だと何も選択されていない状態になっています。複数の選択肢が用意されていて、その中から一つを選ぶと、選択を変更することはできますが、解除することができないものが多いかと思います。必須項目でラジオボタンを使用する場合や、何も選んでいない状態と同等の選択肢(例:「なし」等)を用意しておけば特段問題はないのですが、そうでない場合はやはりラジオボタンといえでもチェックを外せた方が良いのではないかと思います。(もちろん、他に解除する手段が用意されていれば問題ないですよ!)実装イメージとしては、下記のデモのような動きになります。複数の中から一つのラジオボタンを選択した後、選択済みのラジオボタンを再度クリックすると、黒いぽっちが外れて未選択の状態になります。CodePen.本記事では上記の処理の実装方法についてご紹介していきます。基本となるラジオボタンを用意するラジオボタンのチェックが外れる処理を作成する最後にでは、解説していきます。基本となるラジオボタンを用意する特殊な記述等は必要ないので、普通のラジオボタンを作成しましょう。下記はデモで使用しているラジオボタン群になります。検証のため、それぞれに一意のvalueを持たせています。4</label></div>ラジオボタンのチェックが外れる処理を作成するラジオボタンのチェックを外す処理を作成します。下記のような処理の流れになります。同じ値の場合は「:checked」を外し、そうでなければ「:checked」を付与する内容としてはこれでいけると思います。コーディングする前に何をするためのものなのか整理すると、目的が明確になるのでおすすめです!では、実際にスクリプトを作成してみます。各行の処理内容についてはコメントをご参照ください。});以上でスクリプトは完了です。最後にいかがでしたでしょうか。フォーム等で必須の項目ではないけれどラジオボタンを使用したい場合にご活用いただければと思います。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。