javascript - 如何将 onchange 绑定(bind)到每个单选按钮组

Question

<table class="table table-bordered table-hover table-sm">
    <thead>
    <tr>
        <th></th>
        <th class="text-center">Sim</th>
        <th class="text-center">Não</th>
        <th class="text-center">Não Aplicável</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in grupo.Items)
        {
        <tr>
            <th class="pl-4"><i class="fas fa-caret-right"></i><span class="ml-3">@item.Nome</span></th>
            <td class="text-center">
                @*<div class="radio d-none position-absolute">
                    <input type="radio" name="@item.Id" required />
                </div>
                <div class="content" style="display:none;">
                    <i class="fa fa-check"></i>
                </div>*@
                <input type="radio" name="@item.Id" value="S" required />
            </td>
            <td class="text-center">
                @*<div class="radio d-none position-absolute">
                    <input type="radio" name="@item.Id" required />
                </div>
                <div class="content" style="display:none;">
                    <i class="fa fa-check"></i>
                </div>*@ <input type="radio" name="@item.Id" value="N" />

            </td>
            <td class="text-center">
                @*<div class="radio d-none position-absolute">
                    <input type="radio" name="@item.Id" required />
                </div>
                <div class="content" style="display:none;">
                    <i class="fa fa-check"></i>
                </div>*@ <input type="radio" name="@item.Id" value="NA" />
            </td>
        </tr>
        }
    </tbody>
</table>

这会返回页面上的所有单选按钮

console.log($(':radio'));

这仅绑定(bind)在第一个 radio 组上

$("input[name='1']").change(function (e) {            
    alert(this.value)            
})

每个 radio 组有 3 个 radio ，那么如何获取总 radio 组，以便将 onchange 绑定(bind)到所有 radio 组？

Answer 1

我猜您只想选择您发布的循环内的广播？

如果是这样，请向您的 <tr> 添加一个类元素... <tr class='my-radio-group'> .

然后您只能使用 find() 选择这些行中的 radio :

let radioGroups = $('.my-radio-group').find('input[type="radio"]');

$(radioGroups).on('change', function (){
    // your logic
});

或者，如果您只是想让所有 radio 都在任何地方，那么显然

$('input[type="radio"]').on('change', function (){
    // your logic
})