jQuery：同じクラスのラジオを1つだけ選択する方法は？

Question

Iは、各レベルにおける同じクラスと異なるレベルでラジオボタンのグループを持っている：

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

Iは、（サーバー制限による）無線名を変更することはできません。だから私が持っているのは、 '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); 
}); 

あなたがそれぞれに渡すと、それが正常に動作しますので、選択したクラスの複数のクラスを持っている