jQuery each()只被调用一次

dcd*_*181 1 html jquery radio-button

我有多个具有多个选择限制的无线电组,一个是名称属性,另一个是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>
Run Code Online (Sandbox Code Playgroud)

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);
    });
});
Run Code Online (Sandbox Code Playgroud)

这只适用于第一组,有什么建议吗?

编辑:

使用的类选择器而不是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>
Run Code Online (Sandbox Code Playgroud)

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);
    });
});
Run Code Online (Sandbox Code Playgroud)

PSR*_*PSR 7

Id 's 是唯一的.您可以为任何元素使用相同的类名,但不能对多个元素使用相同的id

<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
});
Run Code Online (Sandbox Code Playgroud)