Increment class name in Jquery input function

Question

I have checkbox input with class name that increment with each loop i.e item1, item2, item3, ...

I'm using django python so the original html code looks like below but I have modified it in the snippet to make it runs.

Original code:

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

How can I increment the class in the input jquery function so that only one checkbox for each row can be checked at a time ?

Why not use a pair of radio buttons with a common name per row? Then you don't need any JS at all — Rory McCrossan
– Rory McCrossan, Commented Aug 18, 2020 at 9:31

Greedo · Accepted Answer · 2020-08-18 09:30:05Z

I find this usage of class a bit confusing, as it loses its original meaning. This solution avoid the numeral classes and relies on the table structure:

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

Collectives™ on Stack Overflow

Increment class name in Jquery input function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related