时间戳

首页 > 解决方案 > 如何将 onchange 绑定到每个单选按钮组

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

问题描述

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

这仅在第一个无线电组上绑定

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

我每个无线电组有 3 个无线电，所以我怎样才能获得总无线电组，以便我可以将 onchange 绑定到所有无线电组？

标签： javascriptjqueryhtml

解决方案

如评论中所述，您必须使用 selector $('input[type="radio"]')。我准备了示例片段：

$('input[type="radio"]').on('change', function(){
	console.log($(this).val() + ' changed');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' name='name' value='1'/> 1
<input type='radio' name='name' value='2'/>2
<input type='radio' name='name' value='3'/>3

推荐阅读