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

您有多個類，所以選擇類，你想要傳遞給每它會正常工作