javascript - ラジオボタンをクリックしてオフにする方法は？

Question

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

Answer 1

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

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

---

例

Plain JavaScript:

var radios = document.getElementsByTagName('input');
for(i=0; i<radios.length; i++ ) {
    radios[i].onclick = function(e) {
        if(e.ctrlKey || e.metaKey) {
            this.checked = false;
        }
    }
}

<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

jQuery:

$('input').click(function(e){
    if (e.ctrlKey || e.metaKey) {
        $(this).prop('checked', false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

長押しCtrl(⌘</kbd> on mac) key to uncheck.

Answer 2

ラジオ ボタンは、同じname属性を共有することで定義されるように、グループで使用することを意図しています。次に、それらのいずれかをクリックすると、現在選択されているものの選択が解除されます。ユーザーが行った「実際の」選択を取り消すことができるようにするには、「わからない」や「回答なし」など、空の選択肢に対応するラジオ ボタンを含めることができます。

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

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

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

Answer 3

これが私の答えです（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");
    };
})

Answer 4

ラジオのチェックを外すとどのように機能するか (機能しないか)

if(this.checked) this.checked = falseイベントは次の順序で発生するため、uncheck を簡単に , 経由で簡単に実装することはできません(本当にしたい場合は、最後のハッカーの方法を参照してください)。

1. mousedownまたkeydown
2. mouseupまたkeyup
3. チェックされていない場合は、checked プロパティを設定します
4. click
5. input(状態が変更された場合のみ)
6. change(状態が変更された場合のみ)

上記のチェック解除を実行するイベントはどれですか？

• mouseupまたはmousedown: 次に、ステップ 3 で値が true に戻されて変更され、シーケンスで呼び出されたときに状態が変更されなかったため、入力イベントは発生しません。したがって、ここでチェックを外すことはできません。
• click: 状態は常に false であり、input と change も発火しないため、チェックできません。
• inputまたはchange: 状態が変更されていない場合は起動せず、選択した要素をクリックしても状態が変更されないため、ここでは何も役に立ちません

素朴な方法

上記のシーケンスからわかるように、方法は次のとおりです。

1. の前の状態を読み取るmouseup
2. click前の状態の否定として状態を設定します

以前の状態を data 属性に保存する場合は、それがstringとして保存されるのに対し、checked 属性はbooleanとして保存されることに注意してください。したがって、次のように実装できます。

radio.onmouseup = function() { this.dataset.checked = this.checked? 1 : ""; }
radio.onclick = function() { this.checked = !this.dataset.checked; }

動作しているように見えますが、次の理由からこれを行うべきではありません。

• ユーザーは別の場所に移動mousedownし、ラジオ ボタンの上にカーソルを合わせると、次のようmouseupになります。この場合、マウスアップが発生し、クリックは発生しません。
• ユーザーはTab、ラジオ グループをフォーカスarrowsしてから変更するために使用できます: マウスアップは起動せず、クリックは起動します

適切な方法

別の問題があります: 動的に追加されたラジオ ボタンです。次の 2 つの方法があります。

1. element.appendChild(radio)- イベントですべてのラジオの選択解除を有効にしたDOMContentLoaded場合、この動的に追加されたラジオは影響を受けません
2. element.innerHTML+= '<input type="radio">'- 要素の HTML コンテンツを効果的に置き換え、その内部に DOM を再作成します - したがって、すべてのイベント リスナーは破棄されます

(2)を解決するには、onclick content 属性をお勧めします。element.onclick = fnとelement.setAttribute("onclick", "fn()")は 2 つの異なるものであることに注意してください。onclickまた、ユーザーが使用したインターフェイスに関係なく、ユーザーがラジオをアクティブにするたびに起動することにも注意してください。

さらに別の問題: 選択解除を有効にする場合は、Spaceチェックボックスの動作を模倣するために切り替えも有効にする必要があります。次のコードは、言及されたすべての問題を解決します。

function deselectableRadios(rootElement) {
  if(!rootElement) rootElement = document;
  if(!window.radioChecked) window.radioChecked = {};
  window.radioClick = function(e) {
    const obj = e.target, name = obj.name || "unnamed";
    if(e.keyCode) return obj.checked = e.keyCode!=32;
    obj.checked = window.radioChecked[name] != obj;
    window.radioChecked[name] = obj.checked ? obj : null;
  }
  rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
    radio.setAttribute("onclick", "radioClick(event)");
    radio.setAttribute("onkeyup", "radioClick(event)");
  });
}

deselectableRadios();

<label><input type="radio" name="tag1">one</label>
<label><input type="radio" name="tag1">two</label>
<label><input type="radio" name="tag1">three</label>

<br><br>

<label><input type="radio" name="tag2">one</label>
<label><input type="radio" name="tag2">two</label>
<label><input type="radio" name="tag2">three</label>

コンテンツを動的に追加するときはいつでも呼び出すことができるようdeselectableRadios()になり、ラジオで複数回呼び出しても壊れることはありません。を指定しrootElementて、HTML DOM のサブツリーのみを更新し、Web を高速化することもできます。グローバルな状態が気に入らない場合は、ハッカーの方法を使用できます。

ハッカーのやり方

ポイントは、checked プロパティが設定された後にそれを呼び出すために悪用setTimeoutすることです。mouseup

function deselectable() {
  setTimeout(checked => this.checked = !checked, 0, this.checked);
}

これで、任意のラジオ ボタンを選択解除できるようになりました。

radio.onmouseup = deselectable;

しかし、この単純なワンライナーはクリックするだけで機能し、上記の問題は解決しません。

見捨てられた未来

選択解除可能なラジオは、基本的にグループ内の 1 つだけをチェックできるチェックボックスです。それを次のようにコーディングするという有望な直接的な希望がありました

<input type="checkbox" name="foo" style="appearance: radio">

ただし、radio値はcompat-auto型として定義されるようになり、 のように扱われautoます。つまり、視覚的な変更はありません。ここは今後進展がないようです。

Answer 5

ラジオ ボタンは主にグループで使用されるため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;
    }
    };

}

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

Answer 6

純粋な JavaScript での完全な例:

box.onmouseup = function() {
  var temp = this.children[0];
  if (temp.checked) {
    setTimeout(function() {
      temp.checked = false;
    }, 0);
  }
}

<label id='box' style='margin-right: 1em;'>
  <input type='radio' name='chk_préf_méd_perso' value='valeur'>
  libellé
</label>

Answer 7

私は3つのラジオボタンで小さな答えを作ろうとします.後で追加することができます.

const radios = Array.from(document.getElementsByClassName('radio'))

for(let i of radios) {
    i.state = false

    i.onclick = () => {
        i.checked = i.state = !i.state

        for(let j of radios)
            if(j !== i) j.checked = j.state = false
    }
}

<input class="radio" type="radio">X
<input class="radio" type="radio">Y
<input class="radio" type="radio">Z

これは単一のフォームで機能します。class="radio" を含む複数のフォームがある場合、ラジオ ボタンをクリックすると、他のボタンは無効になります。それが必要な場合は、これを使用してください。

---

今度は、複数のフォーム (依存、データベースから取得) を持つ Rails プロジェクトにこれを実装したいと思いました。各フォームには、2 つの表示可能なラジオ ボタンと 1 つの非表示のラジオ ボタンがあります。

ユーザーに各フォームのラジオボタンを選択/選択解除してもらいたい。また、フォームでいずれかを選択しても、別のフォームで選択されている他のボタンの選択を解除しないでください。だから私はむしろこれをしました：

var radios = Array.from(document.getElementsByClassName('radio'))

for (let i of radios) {
  i.state = false

  i.onclick = () => {
    i.checked = i.state = !i.state

    for (let j of radios)
      if (j !== i) j.state = false
  }
}

<form>
  <input class="radio" name="A" type="radio">A
  <input class="radio" name="A" type="radio">B
  <input class="radio" name="A" type="radio">C
</form>

<form>
  <input class="radio" name="A" type="radio">D
  <input class="radio" name="A" type="radio">E
  <input class="radio" name="A" type="radio">F
</form>

<form>
  <input class="radio" name="SOMETHING" type="radio">G
  <input class="radio" name="SOMETHING" type="radio">H
  <input class="radio" name="SOMETHING" type="radio">I
</form>

すべてが同じ名前を持っていることがわかりますが、それらは 3 でグループ化された異なるフォームにあるため、これは複数のフォームに対して機能します。

Answer 8

現代のブラウザのほとんどはchecked="anything"、checked="true".

あなたの場合、checked 属性を削除する必要があるかもしれません。そのうちの 1 つは、ページをロードするときに関連している可能性があります。

$(this).removeAttr('checked')

これは、ラジオボタンを特定の条件に合わせてチェックしたい場合に役立ちます。属性を削除するだけで、それを実現できます。

PS: すべての場合に役立つわけではありません。

Answer 9

jQueryで解決策を探しているなら、ここにあります。これに似ています

    $('input:radio').click(function() { 
      let name = $(this).attr('name');
      let self = $(this);
      [].filter.call($(`input[name=${name}]`), function(ele){
        return self[0] !== $(ele)[0];
      }).forEach(function(otherEle){
        $(otherEle).removeAttr('data-check');
      });

      if($(this).attr('data-check')){
        $(this).prop("checked", false);
        $(this).removeAttr('data-check');
      }else{
        $(this).attr("data-check", "1");
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input class="radio" name="A" type="radio">A
  <input class="radio" name="A" type="radio">B
  <input class="radio" name="A" type="radio">C
</form>

<form>
  <input class="radio" name="B" type="radio">D
  <input class="radio" name="B" type="radio">E
  <input class="radio" name="B" type="radio">F
</form>

<form>
  <input class="radio" name="C" type="radio">G
  <input class="radio" name="C" type="radio">H
  <input class="radio" name="C" type="radio">I
</form>

Answer 10

この JavaScript は、ドキュメント内の各ラジオの選択解除を容易にします。

function toggleRadio(event)
{
    if(event.target.type === 'radio' && event.target.checked === true)
    {
        setTimeout(()=>{ event.target.checked = false; },0);
    }
}
document.addEventListener('mouseup', toggleRadio);

body { font-size: .55em; }
table { border-collapse: collapse; margin: 0 auto; }
td, th { border: 1px solid #333333; }
td:first-child { padding: 0 0.7em; }
#scale { font-weight:bold; text-align:center; }

<p id="scale">
  5 = Excellent | 4 = Satisfactory | 3 = About Average | 2 = Unsatisfactory | 1 = Very Poor
</p>
<table>
  <thead>
    <tr>
      <th>&nbsp;</th> <th>5</th> <th>4</th> <th>3</th> <th>2</th> <th>1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>How do rate the default behavior of radios inputs in HTML?</td>
      <td><input type="radio" name="r1" value="5" required></td>
      <td><input type="radio" name="r1" value="4"></td>
      <td><input type="radio" name="r1" value="3"></td>
      <td><input type="radio" name="r1" value="2"></td>
      <td><input type="radio" name="r1" value="1"></td>
    </tr>
    <tr>
      <td>How do rate this code's ability to deselect radios?</td>
      <td><input type="radio" name="r2" value="5" required></td>
      <td><input type="radio" name="r2" value="4"></td>
      <td><input type="radio" name="r2" value="3"></td>
      <td><input type="radio" name="r2" value="2"></td>
      <td><input type="radio" name="r2" value="1"></td>
    </tr>
  </tbody>
</table>

このアプローチの利点:

1. 選択を解除するには、現在選択されているラジオをクリックします。
2. コードでは、radio 要素を取得するために DOM 検索を行う必要はありません。
3. ページ読み込み後に、プログラムでドキュメントに追加されたラジオ入力も選択解除可能になります。
4. (ラジオごとに 1 つではなく) すべてのラジオにサービスを提供するために、イベント リスナーが 1 つだけ作成されます。
5. コードは、ページのロードの前後に実行でき、同じように機能します。

このコードのユーザー エクスペリエンスに関する考慮事項については、こちらで説明します。

Answer 11

これは、新しい選択を行う以外に、ラジオ ボタンのチェックを外すことが間違いなく適切な例です。さまざまなインデックスを使用してエントリを選択できる辞書があります。使用するインデックスは、一連のラジオ ボタンによって選択されます。ただし、ユーザーが閲覧したいだけの場合に使用できる「ランダム エントリ」ボタンもあります。ランダムエントリーボタンでエントリーを選択した際に目次をそのままにしておくと誤解を招くので、このボタンを押したら目次選択ラジオボタンのチェックをすべて外し、目次枠の内容を空ページに置き換えます。 .

Answer 12

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/

Answer 13

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

<!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>

Answer 14

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

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