JavaScript - チェックボックスがオンの場合ラジオボタンを選択

Question

チェックボックスをオンにすると、ラジオボタンを入力するJavaScriptコードを記述しようとしています。だからここ

<form> 
    <h3>Radio Buttons</h3> 
    <input type="radio" name="radio1" id="radio1"> Radio 1 
    <br> 
    <input type="radio" name="radio2" id="radio2">Radio 2 
    <br> 
    <br> 

    <h3>Checkbox Groups</h3> 

    <h4><u>Group 1</u></h4> 
    <p align="center"><u>PD</u></p> 
    <ul> 
     <li> 
     <input id="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li> 
     <li> 
     <input id="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li> 
    </ul> 
    <p align="center"><u>ID</u></p> 
    <ul> 
     <li> 
     <input id="idcb" type="checkbox" name="G1ID1" onclick="validate()">G1 ID1</li> 
     <li> 
     <input id="idcb" type="checkbox" name="G1ID2" onclick="validate()">G1 ID2</li> 
    </ul> 

    <h4><u>Group 2</u></h4> 
    <p align="center"><u>PD</u></p> 
    <ul> 
     <li> 
     <input id="pdcb" type="checkbox" name="G2PD1" onclick="validate()">G2 PD1</li> 
     <li> 
     <input id="pdcb" type="checkbox" name="G2PD2" onclick="validate()">G2 PD2</li> 
    </ul> 
    <p align="center"><u>ID</u></p> 
    <ul> 
     <li> 
     <input id="idcb" type="checkbox" name="G2ID1" onclick="validate()">G2 ID1</li> 
     <li> 
     <input id="idcb" type="checkbox" name="G2ID2" onclick="validate()">G2 ID2</li> 
    </ul> 
</form> 

私はJavaScriptが何をしたいです：PDチェックボックスのいずれかが選択されている場合は、ラジオボタンRadio 1が選ばれるはずです後

は

HTMLコードです。 PDチェックボックスが選択されていない場合は、ラジオボタンRadio 2が選択されます。同様に、いずれのチェックボックスも選択されていない場合、ラジオボタンのNONEが選択されるはずです。

function validate() 
{ 
    if(document.getElementById("pdcb").checked) //if pdcb checkbox(es) is/are checked 
    { 
    document.getElementById("radio1").checked = true; 
    document.getElementById("radio2").checked = false; 
    } 
    else if (!document.getElementById("pdcb").checked) //if none of the pdcb checkbox(es) is/are checked 
    { 
    document.getElementById("radio1").checked = false; 
    document.getElementById("radio2").checked = true; 
    } 
    else //if no checkbox is checked, then don't populate any radio button 
    { 
    document.getElementById("radio1").checked = false; 
    document.getElementById("radio2").checked = false; 
    } 

} 

PS：

はこれまでのところ、私は以下のJSコードを書いている私は、純粋なJavaScriptでするコードが必要です。私は私の要件が間違って取得するために謝罪 ：私はjQueryの

EDITを使用することはできません。しかし、ここに正しい要件があります。 PDチェックボックスのいずれかが選択されている場合は、ラジオボタンRadio 1が選択されます。 PDチェックボックスが選択されていない場合は、ラジオボタンRadio 2が選択されます。同様に、いずれのチェックボックスも選択されていない場合、ラジオボタンのNONEが選択されるはずです。

誰でも私を助けてくれますか？

ありがとうございます！

Answer 1

私が最初にあなたがJSFiddleでこれをテストした場合、LOADのTYPEが動作するようにあなたのインラインonclickのイベントに「いいえラップイン」に設定する必要があることを指摘したいと思います。

今、あなたのコードに。ドキュメント要素は、classまたはIDに関連付けることができます。クラスは、同じ機能、スタイリングなどを共有する要素を使用する場合に使用します。 IDは一意の要素であり、のユニーク要素はです。たとえば、あなたのJavaScriptで、あなたは

document.getElementById("pdcb").checked

JavaScriptが単にpdcbのIDを持つページ上最初の要素をつかむ。で確認pdcb要素をテストしようとすると、このID名を持つ4つの要素があります。最後の3つのpdcb要素が無視され、評価されないことを意味します。

代わりに、のは

document.getElementsByClassName("pdcb") 

注単語'要素'の複数形を利用しましょう。これは、の配列を返します。クラス名はpdcbです。私たちが数分間で配列を扱っているという事実に気づくでしょう。まず、ほとんどのHTML IDをクラスに変更しましょう。

<ul> 
    <li> 
     <input class="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li> 
    <li> 
     <input class="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li> 
</ul> 

あなたのpdcbとidcbのすべての要素のためにこれを行うにするつもりです。 radio1とradio2をIDのように保存すると、ユニークな要素であるため、pdcbとidcbのように再利用することはできません。

---

ここでJavaScriptを解決できます。あなたは上から必要な変更を加えたと仮定して、HTMLはここからうまいです。私たちは物をIDからクラスに変えたので、次のような表現は単純にはできません。

document.getElementById("pdcb")

リコール私が以前書いたソリューション：

document.getElementsByClassName("pdcb")

また、私は、これは要素の配列を返すことを言ったことを思い出します。あなたの場合、4つのpdcb要素があります。

document.getElementsByClassName("pdcb")によって返された要素の配列を反復処理して、pdcbクラスがチェックされているかどうかを評価することができます。

var pdcbClass = document.getElementsByClassName("pdcb"); 

    //for each pdcb class on our HTML document 
    for (var i = 0; i < pdcbClass.length; i++) { 
     if (pdcbClass[i].checked == true) { 
      //the next two lines are straight from your JavaScript code 
      document.getElementById("radio1").checked = true; 
      document.getElementById("radio2").checked = false; 
     } 
    } 

あなたが想像できるように、私たちはあなたのページのidcbクラス要素の正確な同じ考えを使用することができます。それは次のようになります。私たちが終わったら、あなたは以下のようなものを持っているはずです。

function validate() 
{ 
    var pdcbClass = document.getElementsByClassName("pdcb"); 
    var idcbClass = document.getElementsByClassName("idcb"); 
    console.log(this); 
    for (var i = 0; i < pdcbClass.length; i++) { 
    if (pdcbClass[i].checked == true) { 
     document.getElementById("radio1").checked = true; 
     document.getElementById("radio2").checked = false; 
    } 
    } 

    for (var i = 0; i < idcbClass.length; i++) { 
    if (idcbClass[i].checked == true) { 
     document.getElementById("radio1").checked = false; 
     document.getElementById("radio2").checked = true; 
    } 
    } 
} 

問題があります。このvalidate()機能をどのチェックボックスが起動しても、チェックボックスはオフになりません。つまり、pdcbクラスのボックスをチェックし、idcbクラスのボックスにチェックを入れると、pdcbボックスはまだチェックされたままです。私たちは決してそれをチェックしないように言いました。つまり、idcbをクリックしたとしても、validate()が発生した場合は、のコードがすべて実行されます。新しいものをチェックする前に、ユーザが手動で前のチェックボックスをオフにしなければならないか、同じことをするいくつかのコードを書く必要があります。具体的には、新しいチェックボックスがオンの場合、のcheckedプロパティの前のボックスをクリアする必要があります。

これはまったく異なる問題であり、別の質問に値する。また、これがこのイベント/機能を書く唯一の方法ではないと考えてください。しかし、あなたは良い進歩を遂げています。

本質的には、あなたが続ける必要があるコードです。私はJSFiddleためのURLを取得しようとしている8protons @

https://jsfiddle.net/a4k9xggu/