2つのラジオボタンの複数のグループの妥当性確認

Question

2つのラジオボタンの複数のグループを検証する方法.1つのラジオが真で、もう一方は偽です。私はJavascriptを使用していますが、正しく動作しません。私は、これらのグループからどれか1つのラジオを選んで検証して提出すればいいのです。以下のコードを参照してください。

<form name="form1" action="http://example.com/" onsubmit="return 
    validateForm()" method="post"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label id="yes" class="btn btn-success"> 
     <input id="true" name="options" type="radio" /> Yes 
     </label> 
     <label id="no" class="btn btn-success"> 
     <input id="false" name="options" required="" type="radio" /> No 
     </label> 
    </div> 
    <div class="btn-group" data-toggle="buttons"> 
     <label id="yes1" class="btn btn-success"> 
     <input id="true" name="options" type="radio" /> Yes 
     </label> 
     <label id="no1" class="btn btn-success"> 
     <input id="false" name="options" required="" type="radio" /> No 
     </label> 
    </div> 
    </form> 
    <script> 
    function validateForm() { 
    var radios = document.getElementsById("true"); 
    if (radios.checked = true) { 
     return true; 
    } else { 
     alert("error"); 
    } 
    } 
    </script> 

すべての真のオプションを検証したいと思います。そして、いずれかが間違って選択された場合は、エラーが発生するはずです。手伝ってくれませんか？ここで

Answer 1

あなたは、

バニラJavaScriptのソリューションです：私は、HTMLコードを書き換える*

<form id="form_1" name="form" action="#" method="POST"> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
    <input class="radio_btn" type="radio" name="group1" value="true">Yes 
 
    <input class="radio_btn" type="radio" name="group1" value="false">No 
 
    </div> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
    <input class="radio_btn" type="radio" name="group2" value="true">Yes 
 
    <input class="radio_btn" type="radio" name="group2" value="false">No 
 
    </div> 
 
    <button type="submit">Submit</button> 
 
</form> 
 

 
<script> 
 
    var form = document.querySelector('#form_1'); 
 
    var radioList = form.querySelectorAll('.radio_btn'); 
 

 
    form.addEventListener('submit', function() { 
 
    for (var i = 0, length1 = radioList.length; i < length1; i++) { 
 
     if (radioList[i].getAttribute('value') == 'false' && radioList[i].checked) { 
 
     alert("error"); 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 
</script>

。