CODEWITHSUNDEEP
javascriptjqueryhtml
Jackal
Jackal

Reputation: 3521

How to bind onchange to every radiobuttongroup

<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>

this returns me all radio buttons on the page

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

this binds only on the 1st radio group

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

I have 3 radios per radio group so how can i get the total radiogroups so i can bind onchange to all of them?

Upvotes: 0

Views: 87

Answers (4)

Mark Schultheiss
Mark Schultheiss

Reputation: 34196

Since you are using a table, and some commented out code, I removed the commented out code and show a sample of the rendered table. I also added an id to the table to scope the change to inputs within that table but only radios.

$('#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>

Upvotes: 0

Dheeraj Kumar
Dheeraj Kumar

Reputation: 146

You can achieve your goal using below code.

this will return changed radio element detail.

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

Upvotes: 1

Sean T
Sean T

Reputation: 2504

I'm guessing you only want to select radio's that are within the loop you've posted?

If so add a class to your <tr> element... <tr class='my-radio-group'>.

Then you can only select radios within those rows using find():

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

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

Or if you just want all radio's anywhere then obviously

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

Upvotes: 1

dganenco
dganenco

Reputation: 1616

As mentioned in comments you have to use selector $('input[type="radio"]'). I've prepared sample snippet:

$('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

Upvotes: 1

Related Questions