Radioknopf Auswahl nur ein „JA“ und ein „Nein“ Option in einer Gruppe

Question

Ich habe versucht, etwas Ähnliches wie diese zu erstellen: https://www.123test.com/disc-personality-test/

nur ein „Ja“ und ein „Nein“ Optionen gewählt werden muss eine Gruppe, so gibt es zwei Auswahl würde nicht in einer Zeile oder Spalte seines

I versucht, eine einfache HTML-Gruppierung zu erzeugen:

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

B Aber ich habe noch keine Ahnung, wie der Javascript/jQuery-Code aussehen soll. Wenn Sie bessere Vorschläge für die HTML-Struktur haben, schlagen Sie das bitte vor. Die Informationen aus dieser Umfrage sollen in eine Datenbank hochgeladen werden.

Answer 1

Versuchen Sie dieses

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

diese Arbeit für mich in Ordnung ...

Answer 2

Dies wird den Trick Sie müssen jedoch die Ereignisbindung für Optionsfelder verwenden, um nach dem Zustand zu suchen, in dem zwei Optionsfelder auf die s geklickt werden eine Reihe. jsfiddle.net/g8gvof06

Answer 3

Versuchen Sie dieses,

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

Und einige JQuery,

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

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

Dank!

Answer 4

Sie müssen die Schaltflächen JA mit dem gleichen Namen und die Schaltflächen NO mit dem gleichen Namen definieren, um die vertikale Gruppierung zu erhalten. Für jede Zeile würde ich etwas Javascript integrieren, das das Gegenstück der ausgewählten Option deselektiert.

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