web-dev-qa-db-ja.com

ラジオボタンをクリックしてチェックを外す方法は？

チェックボックスとは異なり、ユーザーがラジオボタンをクリックすると、ラジオボタンの選択を解除することはできません。 Javascriptを使用してプログラムで切り替えることができる方法はありますか？これは、jQueryを使用しないことが望ましいでしょう。

javascripthtmlradio-button
49
Student

HTMLオブジェクトのプロパティcheckedをfalseに設定するには、次のようにします。

document.getElementById('desiredInput').checked = false;

JavaScriptの例

jQueryの例

PS：押し続ける Ctrl チェックを外すキー。

54
Teneff

ラジオボタンは、同じname属性を共有することで定義されているように、グループで使用するためのものです。次に、それらのいずれかをクリックすると、現在選択されているものの選択が解除されます。ユーザーが行った「実際の」選択をキャンセルできるようにするには、「Do not know」や「No answer」などのヌルの選択に対応するラジオボタンを含めることができます。

チェックまたはチェック解除できる単一のボタンが必要な場合は、チェックボックスを使用します。

checkedプロパティをfalseに設定するだけで、JavaScriptのラジオボタンをオフにすることができます（通常は関係ありません）。

<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">
16
Jukka K. Korpela

プラグインにまとめられました

制限事項：

  1. フォーム要素が必要
  2. ラジオボタンをプログラムで変更するときにクリックイベントをトリガーする必要があります
(function($) {
  $.fn.uncheckableRadio = function() {
    var $root = this;
    $root.each(function() {
      var $radio = $(this);
      if ($radio.prop('checked')) {
        $radio.data('checked', true);
      } else {
        $radio.data('checked', false);
      }
        
      $radio.click(function() {
        var $this = $(this);
        if ($this.data('checked')) {
          $this.prop('checked', false);
          $this.data('checked', false);
          $this.trigger('change');
        } else {
          $this.data('checked', true);
          $this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
        }
      });
    });
    return $root;
  };
}(jQuery));

$('[type=radio]').uncheckableRadio();
$('button').click(function() {
  $('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label><input name="myRadio" type="radio" value="V1" /> R1</label>
  <label><input name="myRadio" type="radio" value="V2" /> R2</label>
  <label><input name="myRadio" type="radio" value="V3" /> R3</label>
  <button type="button">Change R2</button>
</form>
11
user1021364

これが私の答えです（ただし、jQueryで作成しましたが、セレクタのみを対象とし、クラスを追加および削除するため、純粋なJSセレクタおよび純粋なJS追加属性に簡単に置き換えることができます）

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})
10
Shmili Breuer

ラジオボタンは主にグループで使用されるため、スクリプトタグのgetElementsByName( ' ' );で簡単に取得できます。これは配列を返し、各配列の子にイベントリスナーを配置し、チェック状態を設定します。このサンプルを見てください。

var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){

    myRadios[x].onclick = function(){
        if(setCheck != this){
             setCheck = this;
        }else{
            this.checked = false;
            setCheck = null;
    }
    };

}

このガイドでは、コードが視覚的なデモンストレーションでどのように機能するかを説明します。

7
user3716078

同じ問題があったので、ここに来ました。オプションを空のままにして、オプションをユーザーに提示したかったのです。これは、バックエンドを複雑にするチェックボックスを使用して明示的にコーディングすることも可能です。

ユーザーがControlキーを押しながらクリックすることは、コンソールでチェックを外すこととほぼ同じです。マウスダウンをキャッチするのは早く、onclickは遅すぎます。

さて、ついにここに解決策があります！これらの数行をページに一度配置するだけで、ページ上のすべてのラジオボタン用に作成されます。セレクターをいじってカスタマイズすることもできます。

window.onload = function(){
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd){rd.addEventListener("mousedown",
        function(){
                if (this.checked) {this.onclick=function(){this.checked=false}} else{this.onclick=null}
        })})}
<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>
3
HaLeiVi

javascriptの観点から尋ねられましたが、jqueryからの適応は簡単です...このメソッドを使用すると、「null」値を確認して渡すことができます...

var checked_val = "null";
$(".no_option").on("click", function(){
  if($(this).val() == checked_val){
        $('input[name=group][value=null]').prop("checked",true);
    checked_val = "null";
  }else{
        checked_val = $(this).val();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">
3
me_

それが私がやったことです：

function uncheck_radio_before_click(radio) {
    if(radio.prop('checked'))
        radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
    var radio=$(this);
    uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
    var label=$(this);
    var radio;
    if(label.attr('for'))
        radio=$('#'+label.attr('for')).filter('input[type="radio"]');
    else
        radio=label.children('input[type="radio"]');
    if(radio.length)
        uncheck_radio_before_click(radio);
})

http://jsfiddle.net/24vft2of/2/

3
my_stk_oflw_account

User3716078の回答を拡張して、複数の独立したラジオボタングループと、イベントリスナーを複数の要素に割り当てるきちんとした方法を許可します...

window.onload = function() {

    var acc_checked=[];

    [].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
        /**
         * i represents the integer value of where we are in the loop
         * el represents the element in question in the current loop
         */
        el.addEventListener('click', function(e){

            if(acc_checked[this.name] != this) {
                acc_checked[this.name] = this;
            } else {
                this.checked = false;
                acc_checked[this.name] = null;
            }

        }, false);

    });

}
1
A2D

古い質問ですが、人々はここでGoogleから来続け、OPはjQueryなしでできれば尋ねたので、ここに私のショットがあります。

IE 9でも動作するはずです

// iterate using Array method for compatibility
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
        radio.addEventListener('click', function(){
                var self = this;
                // get all elements with same name but itself and mark them unchecked
                Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
                        return self !== filterEl;
                }).forEach(function(otherEl) {
                        delete otherEl.dataset.check
                })

                // set state based on previous one
                if (this.dataset.hasOwnProperty('check')) {
                        this.checked = false
                        delete this.dataset.check
                } else {
                        this.dataset.check = ''
                }
        }, false)
})
<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>
0
Pedro Sanção

純粋なJavaScriptの完全な例：

    <label style='margin-right: 1em;' onmouseup='var temp = this.children[0]; if (temp.checked) { setTimeout(function() { temp.checked = false; }, 0); }'><input type='radio' name='chk_préf_méd_perso' value='valeur'>libellé</label>
0
Jerry

Iclickプラグを使用する場合、以下に示すように簡単です。

 $('#radio1').iCheck('uncheck');
0
MEO

ラジオボタンオブジェクトの作成コードには、次の3行が含まれます。

  obj.check2 = false;    // add 'check2', a user-defined object property
  obj.onmouseup = function() { this.check2 = this.checked };
  obj.onclick = function() { this.checked = !this.check2 };
0
Cruzan

ラジオボタンのcheckedプロパティを使用して、チェックを外すことができます。

このようなもの：

<script>
 function uncheck()
 {
  document.getElementById('myRadio').checked = false;        
 }
 function check()
 {
  document.getElementById('myRadio').checked = true;        
 }
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>

動作をご覧ください： http://jsfiddle.net/wgYNa/

0
gideon

Shmili Breuerの回答に対するバグのないアップデート。

(function() {
    $( "input[type='radio'].revertible" ).click(function() {
        var $this = $( this );

        // update and remove the previous checked class
        var $prevChecked = $('input[name=' + $this.attr('name') + ']:not(:checked).checked');
            $prevChecked.removeClass('checked');

        if( $this.hasClass("checked") ) {
            $this.removeClass("checked");
            $this.prop("checked", false);
        }
        else {
            $this.addClass("checked");
        }
    });
})();
0
Eddie Dane

残念ながら、ChromeまたはEdgeでは機能しませんが、FireFoxでは機能します。

$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });
0
Frank Forte

完全なコードは次のようになります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked"     onclick="setRadio(this)" />
<label for="myRadio"></label>


<script language="javascript">
function setRadio(obj) 
{
    obj.checked = false;
}
</script>
</body>
</html>
0
kiranvj

以下は、新しい選択を行う以外の方法でラジオボタンをオフにすることがほぼ間違いなく適切な例です。さまざまなインデックスを使用してエントリを選択できる辞書があります。使用するインデックスは、ラジオボタンのセットによって選択されます。ただし、ユーザーが閲覧したい場合に使用できる「ランダム入力」ボタンもあります。ランダムエントリボタンを使用してエントリが選択されたときにインデックスを所定の場所に残しておくと誤解を招く可能性があるため、このボタンを押すと、すべてのインデックス選択ラジオボタンをオフにし、インデックスフレームの内容を空のページに置き換えます。

0
Bill Poser