如何使用jQuery在每一行的单选按钮中添加计数？

时间：2018-12-04 09:56:36

标签： javascript jquery

我想在每一行中添加count+。在第一个tr中，所有单选名称应为xRay1。在第二个tr中，所有单选名称应为xRay2。我尝试过的：

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

5 个答案:

答案 0 :(得分：2)

=SUM(--(FREQUENCY(IF(('Refined event data'!$I$2:$I$1500>=17)*('Refined event data'!$I$2:$I$1500<=18),'Refined event data'!$C$2:$C$1500),'Refined event data'!$C$2:$C$1500)>0))

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

答案 1 :(得分：1)

要实现此目的，您可以遍历每个tr并找到其中的无线电。然后，您可以使用当前tr的索引并将其附加到收音机的当前name，如下所示：

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

答案 2 :(得分：1)

您可以使用：

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

我在这里使用i而不是counter，counter是元素的索引，是jQuery中each方法的函数回调的第一个参数。我也使用了相同的代码，但是由于我将当前的index + 1（i+1）与单词xRay串联在一起，因此对它进行了一些修改：

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

请参见下面的工作示例：

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

答案 3 :(得分：1)

我试图得到你的结果， 在每个函数中使用计数器变量

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

答案 4 :(得分：0)

您的count应该在tr循环之外初始化，attr应该为每个单选按钮分配xRay + count。

最终jQuery代码应如下所示：

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