javascript - ラジオボタングループのラジオボタンをコードの値で確認してください

Question

私はプロジェクトで作業しています。ラジオボタングループからラジオボタンをチェックする必要があります。

私はこのラジオボタングループを持っています。私のコードで

<label class="radio-inline"> 
    <input type="radio" name="slect" id="optradio" value="oriente" checked>=Orienté 
</label> 
<label class="radio-inline"> 
    <input type="radio" name="slect" id="optradio" value="Nonoriente">Non orienté 
</label> 

私は、変数を持って、私は2つの値のいずれか

var x="Nonoriente"  or  var x="oriente"  

に影響を与えるために管理するイベントがあるとき、私の目標は、ラジオボタンで、xの同等の値をチェックしautomatiqulyすることですトリガーされた。

Answer 1

まず、象を修正しますあなたのマークアップにIDを重複させることはできません。私たちが作った恣意的なルールではありませんが、重複したIDを扱う際のブラウザの動作は未定義です。プロジェクトはありません。は、IDが重複している必要があります。

値で選択する場合は、このセレクタに一致するページ上のすべてのラジオボタンを選択する方法があります（input[type="radio"][value="Nonoriente"]）。次に、このノードコレクションを反復処理し、checkedプロパティをtrueに設定します。

p/s：このアプローチは非効率的ですが、プロジェクトの拘束に言及したことを考慮すると、唯一実行可能な解決策である可能性があります。

var btn = document.getElementById('btn'); 
 

 
btn.addEventListener('click', function() { 
 
    var radioInputs = document.querySelectorAll('input[type="radio"][value="Nonoriente"]'); 
 

 
    for (i = 0; i < radioInputs.length; ++i) { 
 
    radioInputs[i].checked = true; 
 
    } 
 
});

<label class="radio-inline"> 
 
    <input type="radio" name="slect" id="optradio" value="oriente" checked>Orienté 
 
</label> 
 
<label class="radio-inline"> 
 
    <input type="radio" name="slect" id="optradio" value="Nonoriente">Non orienté 
 
</label> 
 

 
<button type="button" id="btn">Click to check nonoriente</button>

Answer 2

jQueryで簡単です。 .prop() methodのドキュメントは次のとおりです。

if (x === Oriente) { 
    $(input:first-of-type).prop("checked"); 
} else { 
    $(input:first-of-type).prop("checked"); 
} 

それは簡単に各ラジオボタンにユニークなIDを割り当てるために作成し、DOM要素に.prop（）メソッドにアクセスするために、これらを使用する場合があります。 （意味的に彼らはとにかくユニークである必要があり、何らかの理由であなたがクラスを使用する必要があり、複数のDOMノードには何も適用したい場合。。）

ネイティブのJavascript：すべての

if (x === Oriente) { 
    document.getElementById('uniqueId1').checked = true; 
} else { 
    document.getElementById('uniqueId2').checked = true; 
}