jQuery: Wie wähle ich nur ein Radio mit den gleichen Klassen?

Question

Ich habe Gruppen von Optionsfeldern auf verschiedene Ebenen mit gleicher Klasse in jeder Ebene:

<div> <!-- radio group one --> 
    <input type="radio" name="rdo1" class="some1 text4 radio_group_1" /> 
    <input type="radio" name="rdo2" class="some2 text5 radio_group_1" /> 
    <input type="radio" name="rdo3" class="some3 text6 radio_group_1" /> 
</div> 
<div> <!-- radio group two --> 
    <input type="radio" name="rdo4" class="some1 text4 radio_group_2 other1" /> 
    <input type="radio" name="rdo5" class="some2 text5 radio_group_2 other2" /> 
    <input type="radio" name="rdo6" class="some3 text6 radio_group_2 other3" /> 
</div> 
... <!-- radio group three (and so on) --> 

ich nicht die Radionamen ändern kann (aufgrund von Server-Einschränkungen). Das einzige, was ich habe, sind die Klassen, die mit 'radio_group_' beginnen. Ich benutze this solution und this ohne Erfolg, weil die Klassennamen in der Mitte der anderen Klassennamen sind.

Wie kann ich Radios mit demselben Klassennamen auswählen und sie wie Gruppenradios agieren lassen?

Answer 1

Sie tun ein solches Verhalten wollen:

$(document).ready(function() { 
 
    $("div > input[type=radio]").click(function() { 
 

 
    var thisParent = $(this).closest("div"); 
 
    var prevClicked = thisParent.find(":checked"); 
 
    var currentObj = $(this); 
 
    prevClicked.each(function() { 
 
     if (!$(currentObj).is($(this))) { 
 
     $(this).prop("checked", false); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
Group 1 
 
<div> 
 
    <!-- radio group one --> 
 
    <input type="radio" name="rdo1" class="some1 text4 radio_group_1" />rdo1 
 
    <input type="radio" name="rdo2" class="some2 text5 radio_group_1" />rdo2 
 
    <input type="radio" name="rdo3" class="some3 text6 radio_group_1" />rdo3 
 
</div> 
 
<br/>Group 2 
 
<div> 
 
    <!-- radio group two --> 
 
    <input type="radio" name="rdo4" class="some1 text4 radio_group_2 other1" />rdo4 
 
    <input type="radio" name="rdo5" class="some2 text5 radio_group_2 other2" />rdo5 
 
    <input type="radio" name="rdo6" class="some3 text6 radio_group_2 other3" />rdo6 
 
</div>

Answer 2

Ich weiß nicht, warum Sie sagte:

ich nicht die Namen Radio ändern

Wie dem auch sei, die Antwort auf das, was Sie vielleicht wie das hier zu fragen:

$('.radio_group_1, .radio_group_2').click(function(){ 
 
    
 
    $(this).prop('checked', true).siblings().prop('checked', false); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> <!-- radio group one --> 
 
    <input type="radio" name="rdo1" class="some1 text4 radio_group_1" /> 
 
    <input type="radio" name="rdo2" class="some2 text5 radio_group_1" /> 
 
    <input type="radio" name="rdo3" class="some3 text6 radio_group_1" /> 
 
</div> 
 
<div> <!-- radio group two --> 
 
    <input type="radio" name="rdo4" class="some1 text4 radio_group_2 other1" /> 
 
    <input type="radio" name="rdo5" class="some2 text5 radio_group_2 other2" /> 
 
    <input type="radio" name="rdo6" class="some3 text6 radio_group_2 other3" /> 
 
</div>

Answer 3

<div id="radio_group_1"> 
    <!-- radio group one --> 
    <input type="radio" name="rdo1" class="some1 text4 radio_group_1" />rdo1 
    <input type="radio" name="rdo2" class="some2 text5 radio_group_1" />rdo2 
    <input type="radio" name="rdo3" class="some3 text6 radio_group_1" />rdo3 
</div> 
<div id="radio_group_2"> 
    <!-- radio group two --> 
    <input type="radio" name="rdo4" class="some1 text4 radio_group_2 other1" />rdo4 
    <input type="radio" name="rdo5" class="some2 text5 radio_group_2 other2" />rdo5 
    <input type="radio" name="rdo6" class="some3 text6 radio_group_2 other3" />rdo6 
</div> 

$("input[type=radio]").on("click", function(){ 
var groupName = $(this).closest("div").attr("id"); 
    $("input[type=radio]."+groupName).prop("checked", false); 
    $(this).prop("checked", true); 
}); 

https://jsfiddle.net/tr73o3e6/2/

Answer 4

$("input[type=radio]").click(function() { 
    var thisClass = $(this).attr("class"); 
    console.log(thisClass); 

    $('.'+thisClass).each(function() { 
     $(this).prop("checked", false); 
    }); 
    $(this).prop("checked", true); 
}); 

Sie haben mehrere Klassen so wählen Klasse, die Sie jede übergeben wollen, und es wird