LoginSignup
1

More than 3 years have passed since last update.

CSSで装飾された複数のラジオボタン群の2度押しで選択解除する(jQuery)

Last updated at Posted at 2019-10-15

今更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 は連想配列でチェック状態を格納してます。

参考サイト)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1