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

15083 Views
2018年02月05日 JavaScript

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

しかしそういった要望があるのも事実。
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;
			}
		}
	});
});

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

性別：

</form>

のように使います。

SNSでシェア♪

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

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

使い方

使用例

関連記事