inputのradioをcheckboxみたいにcheckedを外す方法

15125 Views
JavaScript
inputのradioをcheckboxみたいにcheckedを外す方法

ラジオボタンをフォームで使いたいけど、間違ってクリックされた時は外させることがデフォルトの仕様ではできません。
(間違う可能性がある時点でフォームの設計が悪いとも言われかねないですが。。)

しかしそういった要望があるのも事実。
javascriptを使うことで対応が可能です。

SNSでシェア♪

スポンサーリンク

目次

以下のコードをコピペする

$(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>

のように使います。

SNSでシェア♪

スポンサーリンク

関連記事