Checkbox doesnot work in table rows with jQuery check uncheck function

Question

$(document).ready(function() {
  $('#table tr').click(function() {
    if ($('input[type=checkbox]', this).is(':checked')) {
      $(this).removeClass('bg-success');
      $('input[type=checkbox]', this).prop('checked', false);
    } else {
      $(this).addClass('bg-success');
      $('input[type=checkbox]', this).prop('checked', true);
    }
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table">
  <tr class="bg-success">
    <th><input type="checkbox" name="param[1]" value="1" checked></th>
    <td><strong>abc</strong></td>
    <td>abc</td>
    <td>abco</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[2]" value="1"></th>
    <td><strong>def</strong></td>
    <td>def</td>
    <td>def</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[3]" value="1"></th>
    <td><strong>ghi</strong></td>
    <td>ghi</td>
    <td>ghi</td>
  </tr>

I have table with checkboxes in each row. After click on table row, checkbox is checked or unchecked. That is OK. But if I click exactly inside checkbox, it doesnot work. Thank you for help.

Here is my code in FIDDLE. https://jsfiddle.net/o9w6v4pu/

It's because when you check the box you immediately set change it's checked property back again — Rory McCrossan
– Rory McCrossan, Commented Jan 4, 2019 at 16:44
If you click the checkbox itself, you change it's state. Then your logical click logic changes it's state again. Effectively undoing the click. — Taplar
– Taplar, Commented Jan 4, 2019 at 16:44
Given that you are flipping a class as part of your logic, you might consider checking for it's existance, rather than the checked state, to know how you should react. Worst case scenario, you check the checkbox and you try to set it to checked again because the bg-success is not there — Taplar
– Taplar, Commented Jan 4, 2019 at 16:46

Taplar · Accepted Answer · 2019-01-04 17:01:18Z

1

$(document).ready(function() {
  $('#table tr').on('click', function(e) {
    var $tr = $(this);
    var $checkbox = $('input:checkbox', this);
    
    if (!$checkbox.is(e.target)) {
      // the user did not click the checkbox, so flip its state
      $checkbox.prop('checked', !$checkbox.prop('checked'));
    }
    
    //toggle the bg-success class
    $tr.toggleClass('bg-success', $checkbox.prop('checked'));
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table">
  <tr class="bg-success">
    <th><input type="checkbox" name="param[1]" value="1" checked></th>
    <td><strong>abc</strong></td>
    <td>abc</td>
    <td>abco</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[2]" value="1"></th>
    <td><strong>def</strong></td>
    <td>def</td>
    <td>def</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[3]" value="1"></th>
    <td><strong>ghi</strong></td>
    <td>ghi</td>
    <td>ghi</td>
  </tr>
</table>

edited Jan 4, 2019 at 17:01

answered Jan 4, 2019 at 16:50

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taplar Over a year ago

It'd have to lookup the checkbox first, since the this is the tr in this case. But I'll see if I can edit it to do that. @RoryMcCrossan.

Taplar Over a year ago

Alright, so I updated it to explicitly check to see if the checkbox was clicked. And it uses the checkbox state on the toggle as suggested by @RoryMcCrossan

mbunch · Accepted Answer · 2019-01-04 16:54:12Z

I dont think you need to worry about changing the checked state.

$(document).ready(function() {
  $('#table tr').click(function() {
    if ($('input[type=checkbox]', this).is(':checked')) {
      $(this).addClass('bg-success');
    } else {
      $(this).removeClass('bg-success');
    }
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table">
  <tr class="bg-success">
    <th><input type="checkbox" name="param[1]" value="1" checked></th>
    <td><strong>abc</strong></td>
    <td>abc</td>
    <td>abco</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[2]" value="1"></th>
    <td><strong>def</strong></td>
    <td>def</td>
    <td>def</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[3]" value="1"></th>
    <td><strong>ghi</strong></td>
    <td>ghi</td>
    <td>ghi</td>
  </tr>

Collectives™ on Stack Overflow

Checkbox doesnot work in table rows with jQuery check uncheck function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related