Question

我试图创建类似于此的内容：https://www.123test.com/disc-personality-test/

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

我尝试创建一个基本的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 - ＆GT;

<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 - ＆GT;

 $("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');
   }
 });

这对我来说很好......

Answer 2

这将解决这个问题，但您必须使用单选按钮上的事件绑定来检查在同一行上单击两个单选按钮的情况。 jsfiddle.net/g8gvof06

Answer 3

试试这个，

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="main1">
    <div id="group1">
        <input type="radio" name="say_yes" class="group1" value="test1"> 
        <input type="radio" name="say_no" class="group1" value="test2"> Group 1
    </div>
    <div id="group2">
        <input type="radio" name="say_yes" class="group2" value="test1"> 
        <input type="radio" name="say_no" class="group2" value="test2"> Group 2
    </div>
    <div id="group3">
        <input type="radio" name="say_yes" class="group3" value="test1"> 
        <input type="radio" name="say_no" class="group3" value="test2"> Group 3
    </div>
    <div id="group4">
        <input type="radio" name="say_yes" class="group4" value="test1"> 
        <input type="radio" name="say_no" class="group4" value="test2"> Group 4
    </div>
</div>

还有一些Jquery，

$('input').click(function(){
  $(this).parent().find('input').not(this).removeAttr('checked');
});

演示http://jsbin.com/runocizugo/edit?html,js,output

谢谢！

Answer 4

您必须定义具有相同名称的YES按钮和具有相同名称的NO按钮才能实现垂直分组。对于每一行，我会集成一些Javascript，取消选择所选选项的对应部分。

 $("input:radio").change(function(){
   if ($(this).is(':checked')) {
     var name = $(this).attr("name");
     $(this).parent().children().each(function(i) { 
       if(this.getAttribute("name") != name){
         this.checked = false;
       }
     });
   }
});

https://jsfiddle.net/yeqsqxcq/

单选按钮在组中仅选择一个“是”和一个“否”选项

4 个答案: