jQuery: Как выбрать только одно радио с одинаковыми классами?

Question

У меня есть группы переключателей на разных уровнях с таким же классом на каждом уровне:

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

Я не могу изменить название радио (из-за ограничения сервера). Поэтому единственное, что у меня есть, это классы, начинающиеся с «radio_group_». Я использую this solution и this без успеха, потому что имена классов находятся в середине других имен классов.

Как выбрать радиостанции с таким же именем класса и заставить их действовать как групповые радиостанции?

Answer 1

ли вам хочу такое поведение:

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

Я не знаю, почему вы сказали:

Я не могу изменить имена радио

Во всяком случае, ответ на то, что вы спрашиваете, может быть, как это:

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

У вас есть несколько классов, поэтому выберите класс, который вы хотите передать каждому, и он будет работать нормально