今更jQueryだけど、たまに困ることがあったのと、意外とすんなり書けたので書き残しておきます
ラジオボタンをCSSで装飾すると、こんな感じのHTMLになることがありますよね。
こういったケースのラジオボタンの二度押しで選択解除したかったのですが、意外とサンプルなかったので書きました。
<span class="btn-radio__wrap">
<input type="radio" name="radio-1" id="radio-1-1" value="1">
<label class="btn-radio" for="radio-1-1">スライム</label>
</span>
jQueryはこんな感じです
$(function () {
var nowChecked = [];
$('.btn-radio').on('click', function () {
// 対象のラジオボタンのID取得
var radioID = '#'+$(this).attr('for');
var radio = $(radioID);
// 対象のラジオボタンのname取得
var radioName = radio.attr('name');
// 保存されてるIDとnameが同じだったら
if(radioID == nowChecked[radioName]) {
// チェックを外す
nowChecked[radioName] = false;
$('input[name="'+ radioName +'"]').prop('checked', false);
// labelのクリック処理を終わらせてラジオボタンをチェックさせない
return false;
} else {
// チェックした nameとIDを保存
nowChecked[radioName] = radioID;
return true;
}
});
});
nameが違う複数のラジオボタン群に対応するために、 nowChecked は連想配列でチェック状態を格納してます。
参考サイト)
- ラジオボタンを2度押しで選択解除する(複数グループ) │ ノラWEB屋 野良人(のらんど)
- 【jQuery入門】ラジオボタン(radio要素)の取得・選択・checked操作! | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト https://www.sejuku.net/blog/46739#false