【jQuery】label でラジオボタンのオン/オフ|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

【jQuery】label でラジオボタンのオン/オフ

2017.11.28

通常 label ではラジオボタンの選択しかできませんが、
すでに選択済みだった場合に解除もしたい、今回はその方法を考えてみました。

デモ

「A」「B」それぞれが label になっています。
クリックして動作を確認してみてください。

一度目はラジオボタンのチェックが入り、二度目はチェックが外れます。

See the Pen WXyXoL by leo (@leo-trym) on CodePen.

ソース

HTML

<label class="label" for="foo">A</label>
<label class="label" for="bar">B</label>

<input id="foo" type="radio" name="radio">
<input id="bar" type="radio" name="radio">

JS

$(function(){

  $('label').click(function(){
    var e = $(this).attr('for'); // for を取得
    var e = $('#' + e);          // for をセレクタに整形
    if ( e.prop('checked') ) {   // チェック済みなら
      e.prop('checked', false);  // チェックを外す
      return false;              // label のクリックを無効化
    }
  });
  
});

for 属性を取得してチェック済みならラジオボタンのチェックを外します。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00