如何將onchange綁定到每個radiobuttongroup

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

這僅限於第一個廣播組

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

我每個無線電組有3個無線電，那么我怎樣才能得到總的無線電組，這樣我就可以將它們綁定到所有這些無線電組？

Answer 1

如評論中所述，您必須使用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 

Answer 2

我猜你只想選擇你發布的循環中的無線電？

如果是這樣，在<tr>元素中添加一個類...... <tr class='my-radio-group'> 。

然后，您只能使用find()在這些行中選擇無線電：

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

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

或者，如果您只是希望所有收音機都在任何地方，那么顯然

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

Answer 3

您可以使用以下代碼實現目標。

這將返回更改的無線電元素細節。

$('input[type="radio"]').on('change', function() {
   console.log(this);
  // do something here
});

Answer 4

由於您正在使用表和一些注釋掉的代碼，因此我刪除了注釋掉的代碼並顯示了呈現表的示例。 我還在表中添加了一個id，以便將更改范圍限定在該表中的輸入范圍內，但僅限於無線電。

 $('#myradiotable').on('change', 'input[type=radio]', function(event) { console.log($(event.delegateTarget).attr('id'));// the table console.log($(this).attr('name')); let ichanged = $(this); console.log("changed:", ichanged.val()); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <table id="myradiotable" 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> <tr> <th class="pl-4"><i class="fas fa-caret-right"></i><span class="ml-3">Name Friend</span></th> <td class="text-center"> <input type="radio" name="friend" value="S" required /> </td> <td class="text-center"> <input type="radio" name="friend" value="N" /> </td> <td class="text-center"> <input type="radio" name="friend" value="NA" /> </td> </tr> <tr> <th class="pl-4"><i class="fas fa-caret-right"></i><span class="ml-3">Name Cousin</span></th> <td class="text-center"> <input type="radio" name="cousin" value="S" required /> </td> <td class="text-center"> <input type="radio" name="cousin" value="N" /> </td> <td class="text-center"> <input type="radio" name="cousin" value="NA" /> </td> </tr> </tbody> </table>