CODEWITHSUNDEEP
javascriptjquery
Rohit Verma
Rohit Verma

Reputation: 3783

How to add count with each row's radio button using jQuery?

I want to add count+ in each row like. In the first tr with all radio name should be xRay1. In the second tr with all radio name should be xRay2. What I tried:

$(document).ready(function() {
  $('.changeRadioName').click(function() {
    $('.table tr').each(function() {
      var count = 1;
      $(this).find('input:radio[name="xRay"]').attr('name', count);
      count++;
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="changeRadioName">Change name of each row's radio</button>

<table class="table table-bordered table-striped table-hover">
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
</table>

Upvotes: 1

Views: 571

Answers (5)

Lokesh
Lokesh

Reputation: 301

Your count should be initialized outside tr loop and attr should assign xRay + count to every radio button.

Final jQuery code should look like:

$(document).ready(function() {
  $('.changeRadioName').click(function() {
      var count = 1;
    $('.table tr').each(function() {
      $(this).find('input:radio[name="xRay"]').attr('name', 'xRay' + count);
      count++;
    });
  });
});

Upvotes: 0

AJAY MAURYA
AJAY MAURYA

Reputation: 551

I try to get your result, use counter variable out of the each function 

 $(document).ready(function(){
     
    $('.changeRadioName').click(function(){
            var count = 1;
    $('.table tr').each(function () {
                $(this).find('input:radio[name="xRay"]').attr('name', 'xRay'+count);
				
                count++;
            });
         });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <button class="changeRadioName">Change name of each row's radio</button>
    
    <table class="table table-bordered table-striped table-hover">
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    </table>

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50974

You can use:

$(this).find('input:radio[name="xRay"]').attr('name', 'xRay'+(i+1));

Here I am using i instead of counter, which is the index of the element and is the first argument of the function callback for the each method in jQuery. I am also using your same code, however, it is slightly modified, as I am concatenating the current index+1 (i+1) with the word xRay:

.attr('name', 'xRay'+(i+1));

See working example below:

$(document).ready(function() {

  $('.changeRadioName').click(function() {
    $('.table tr').each(function(i) {
      $(this).find('input:radio[name="xRay"]').attr('name', 'xRay'+(i+1));
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="changeRadioName">Change name of each row's radio</button>

<table class="table table-bordered table-striped table-hover">
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
</table>

Upvotes: 1

Harsh Madaiyar
Harsh Madaiyar

Reputation: 166

 $(document).ready(function(){
     
    $('.changeRadioName').click(function(){
var count = 1;
    $('.table tr').each(function () {
            
                $(this).find('input:radio[name="xRay"]').attr('name', "xRay"+count);
                count++;
            });
         });
 });
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <button class="changeRadioName">Change name of each row's radio</button>
    
    <table class="table table-bordered table-striped table-hover">
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    <tr>
        <td>
              <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
              <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
        </td>
        </tr>
    </table>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337713

To achieve this you can loop through each tr and find the radios within it. Then you can use the index of the current tr and append it to the current name of the radio, something like this:

$('.changeRadioName').click(function() {
  $('.table tr').each(function(i) {
    $(this).find(':radio').prop('name', function(_, name) {
      return name + (i + 1);
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="changeRadioName">Change name of each row's radio</button>

<table class="table table-bordered table-striped table-hover">
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
  <tr>
    <td>
      <label><input type="radio" class="trBtnYes" name="xRay" value="true" /> Yes</label>
      <label><input type="radio" class="trBtnNo" name="xRay" value="false" /> No</label>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions