javascript - 单选按钮在一组中仅选择一个 "YES"和一个 "No"选项

Question

我试图创建类似的东西:https://www.123test.com/disc-personality-test/

一组中只能选择一个"is"和一个“否”选项，因此一行或一列中不会有两个选择

我尝试创建一个基本的 html 分组:

<div id="main1">
            <div id="group1">
                <input type="radio" name="group1" class="group1" value="test1"> 
                <input type="radio" name="group1" class="group1" value="test2"> Group 1
            </div>
            <div id="group2">
                <input type="radio" name="group2" class="group2" value="test1"> 
                <input type="radio" name="group2" class="group2" value="test2"> Group 2
            </div>
            <div id="group3">
                <input type="radio" name="group3" class="group3" value="test1"> 
                <input type="radio" name="group3" class="group3" value="test2"> Group 3
            </div>
            <div id="group4">
                <input type="radio" name="group4" class="group4" value="test1"> 
                <input type="radio" name="group4" class="group4" value="test2"> Group 4
            </div>
        </div>

但我仍然不知道 Javascript/jQuery 代码应该是什么样子。如果您对 HTML 结构有更好的建议，也请提出建议。这项调查的信息应该上传到数据库中。

Answer 1

试试这个

html-->

<div id="main1">
  <div id="group1">
    <input type="radio" name="group1" class="team1" value="test1"> 
    <input type="radio" name="group1" class="team2" value="test2"> Group 1
  </div>
  <div id="group2">
    <input type="radio" name="group2" class="team1" value="test1"> 
    <input type="radio" name="group2" class="team2" value="test2"> Group 2
  </div>
  <div id="group3">
    <input type="radio" name="group3" class="team1" value="test1"> 
    <input type="radio" name="group3" class="team2" value="test2"> Group 3
  </div>
  <div id="group4">
    <input type="radio" name="group4" class="team1" value="test1"> 
    <input type="radio" name="group4" class="team2" value="test2"> Group 4
  </div>
</div>

javascript-->

 $("input:radio").change(function(){
 var group = ":radio[name='"+ $(this).attr("name") + "']";
   if ($(this).is(':checked')) {
     $("input:radio[class^='"+ $(this).attr('class')+"']").each(function(i) {
       this.checked = false;
     });
     $(this).prop('checked', 'checked');
   }
 });

这对我来说工作正常......