在Jquery输入函数中增加类名答案

【问题标题】：Increment class name in Jquery input function在Jquery输入函数中增加类名
【发布时间】：2020-12-07 10:54:33
【问题描述】：

我有复选框输入，类名随着每个循环递增，即 item1, item2, item3, ...

我使用的是 django python，所以原始 html 代码如下所示，但我在 sn-p 中对其进行了修改以使其运行。

原码：

<table class=" table table-bordered table-hover">
  <tr>
    <th>Items</th>
    <th>Amount</th>
    <th class="text-center">Check 1</th>
    <th class="text-center">Check 2</th>
  </tr>
  {% for a in items %}
  <tr>
    <td>{{a.title}}</td>
    <td>{{a.amount}}</td>
    <td class="text-center"><input type="checkbox" class="item{{ forloop.counter }}" value="{{a.amount}}" name="check1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item{{ forloop.counter }}" value="{{a.amount}}" name="check2" /></td>
  </tr>
  {% endfor %}
</table>

//to make sure only one checkbox can be checked for each item in the row
for (i = 1; i < 10; i++) {
  $('.item1' + i).on('input', function() {
    $('input.item' + i).not(this).prop('checked', false);
  });
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class=" table table-bordered table-hover">
  <tr>
    <th>Items</th>
    <th>Amount</th>
    <th class="text-center">Check 1</th>
    <th class="text-center">Check 2</th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>$10</td>
    <td class="text-center"><input type="checkbox" class="item1" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item1" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>$20</td>
    <td class="text-center"><input type="checkbox" class="item2" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item2" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>$30</td>
    <td class="text-center"><input type="checkbox" class="item3" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item3" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 4</td>
    <td>$40</td>
    <td class="text-center"><input type="checkbox" class="item4" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item4" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 5</td>
    <td>$50</td>
    <td class="text-center"><input type="checkbox" class="item5" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item5" value="20" name="item2" /></td>
  </tr>
</table>

如何在输入 jquery 函数中增加类，以便一次只能检查每行的一个复选框？

【问题讨论】：

为什么不使用一对每行有一个通用名称的单选按钮？那你根本不需要任何JS

标签： javascript jquery

【解决方案1】：

我发现类的这种用法有点混乱，因为它失去了原来的含义。该解决方案避免了数字类并依赖于表结构：

//to make sure only one checkbox can be checked for each item in the row
$('.item').on('change', function() {
  $(this).parents("tr").find(".item").not(this).prop('checked', false);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class=" table table-bordered table-hover">
  <tr>
    <th>Items</th>
    <th>Amount</th>
    <th class="text-center">Check 1</th>
    <th class="text-center">Check 2</th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>$10</td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>$20</td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>$30</td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 4</td>
    <td>$40</td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item2" /></td>
  </tr>
  <tr>
    <td>Item 5</td>
    <td>$50</td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item1" checked="checked" /></td>
    <td class="text-center"><input type="checkbox" class="item" value="20" name="item2" /></td>
  </tr>
</table>

【讨论】：