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

Question

I was trying to create something similar to this: https://www.123test.com/disc-personality-test/

Only one "Yes" and one "No" options must be selected in a group, so there wont be two selections in a row or column

I tried to create a basic html grouping:

<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>

But i still have no idea about how the Javascript / jQuery code is supposed to be like. If you have better suggestions for the HTML structure, please do suggest that too. The information from this survey is supposed to be uploaded into a database.

Answer 1

Try this one

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

this working fine for me...

Answer 2

This will do the trick but you must use event binding on radio buttons to check for the condition where two radio buttons are clicked on the same row. jsfiddle.net/g8gvof06

Answer 3

Try this,

<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>

And some Jquery,

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

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

Thanks!

Answer 4

You have to define the YES buttons with the same name and the NO buttons with the same name to achive the vertical grouping. For each line I would integrate some Javascript which deselects the counterpart of the selected option.

 $("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/