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

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

<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_". Я использую это решение и это безуспешно, потому что имена классов находятся в середине имен других классов.

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


javascript jquery radio-button radio-group
person Vahid    schedule 08.08.2016    source источник
comment
Почему бы вам не изменить их имена?   -  person entiendoNull    schedule 08.08.2016
comment
Радио генерируются динамически, и из-за ограничений сервера я не могу их изменить.   -  person Vahid    schedule 08.08.2016

Ответы (4)


arrow_upward
1
arrow_downward

Вы хотите такого поведения:

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

person vijayP    schedule 08.08.2016

arrow_upward
1
arrow_downward 

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

person Sagar    schedule 08.08.2016

arrow_upward
0
arrow_downward

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

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

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

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

person rmondesilva    schedule 08.08.2016

arrow_upward
0
arrow_downward 

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

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

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

person nikunjM    schedule 14.11.2017