jQuery each() только вызывается один раз

Question

У меня есть несколько групп радиостанций, которые имеют несколько ограничений выбора, один по атрибуту name, а другой - с jQuery. Для каждой радиогруппы я устанавливаю проверенные атрибуты на false при изменении, поэтому для каждой группы может быть проверено только одно радио.

HTML

<div id="radio_group"> 
    <input type="radio" name="name" value="0"/>Name 
    <input type="radio" name="address" value="0"/>Address 
    <input type="radio" name="phone" value="0"/>Phone 
</div> 
<div id="radio_group"> 
    <input type="radio" name="name" value="1"/>Name 
    <input type="radio" name="address" value="1"/>Address 
    <input type="radio" name="phone" value="1"/>Phone 
</div> 

JQuery

$('#radio_group').each(function(){ 
    var mainElement = $(this); 
    mainElement.children('input[type=radio]').on('change', function(){ 
     mainElement.children('input[type=radio]').not(this).prop('checked', false); 
    }); 
}); 

Это работает только с первой группой, любые предложения?

EDIT:

Б Селектор класса вместо ID:

HTML

<div class="radio_group"> 
    <input type="radio" name="name" value="0"/>Name 
    <input type="radio" name="address" value="0"/>Address 
    <input type="radio" name="phone" value="0"/>Phone 
</div> 
<div class="radio_group"> 
    <input type="radio" name="name" value="1"/>Name 
    <input type="radio" name="address" value="1"/>Address 
    <input type="radio" name="phone" value="1"/>Phone 
</div> 

JQuery

$('.radio_group').each(function(){ 
    var mainElement = $(this); 
    mainElement.children('input[type=radio]').on('change', function(){ 
     mainElement.children('input[type=radio]').not(this).prop('checked', false); 
    }); 
}); 

Answer 1

Id 's является unique.You может использовать то же имя класса для любого ни в элементов, но вы не можете использовать один и тот же идентификатор для более чем одного элемента

<div id="radio_group" class="className"> 
    <input type="radio" name="name" value="0"/>Name 
    <input type="radio" name="address" value="0"/>Address 
    <input type="radio" name="phone" value="0"/>Phone 
</div> 
<div id="radio_group" class="className"> 
    <input type="radio" name="name" value="1"/>Name 
    <input type="radio" name="address" value="1"/>Address 
    <input type="radio" name="phone" value="1"/>Phone 
</div> 


$('.className').each(function(){ 
    //write logic here 
}); 

Answer 2

ID - уникальный идентификатор. Поэтому при использовании селектора jQuery # он возвращает только 1 объект.

Используйте класс вместо этого, и он будет работать.

Answer 3

Вы не можете иметь один и тот же идентификатор несколько раз. Это не жалоба Html. Вы можете использовать тот же класс и использовать . selector, чтобы выбрать все дивы

Answer 4

HTML:

<div classs="radio_group"> 
    <input type="radio" name="name" value="0"/>Name 
    <input type="radio" name="address" value="0"/>Address 
    <input type="radio" name="phone" value="0"/>Phone 
</div> 
<div class="radio_group"> 
    <input type="radio" name="name" value="1"/>Name 
    <input type="radio" name="address" value="1"/>Address 
    <input type="radio" name="phone" value="1"/>Phone 
</div> 

JQuery:

$('.radio_group').each(function(){ 
    var mainElement = $(this); 
    mainElement.children('input[type=radio]').on('change', function(){ 
     mainElement.children('input[type=radio]').not(this).prop('checked', false); 
    }); 
}); 

Вы не можете id повторил