inputのradioをcheckboxみたいにcheckedを外す方法
15471 Views
JavaScript
JavaScript
ラジオボタンをフォームで使いたいけど、間違ってクリックされた時は外させることがデフォルトの仕様ではできません。
(間違う可能性がある時点でフォームの設計が悪いとも言われかねないですが。。)
しかしそういった要望があるのも事実。
javascriptを使うことで対応が可能です。
スポンサーリンク
目次
以下のコードをコピペする
$(window).on("load", function() { var _radio = []; $('input.radio').on('click', function() { var _this = $(this); var _name = _this.attr('name'); var _val = _this.val(); if (_radio[_name] === '' || _radio[_name] === null || _radio[_name] === undefined) { _radio[_name] = _val; } else { if (_radio[_name] == _val) { _this.prop('checked', false); _radio[_name] = ''; } else { _radio[_name] = _val; } } }); });
使い方
選択状態を解除させたいラジオボタンのクラスに「radio」とつけるだけです。
使用例
<form action="./" method="get"> 性別: <label><input type="radio" name="gender" value="men" class="radio">男性</label> <label><input type="radio" name="gender" value="women" class="radio">女性</label> </form>
のように使います。
スポンサーリンク