Флажок не работает в строках таблицы с функцией jQuery check uncheck - PullRequest
Новая
       15

Флажок не работает в строках таблицы с функцией jQuery check uncheck

0 голосов
/ 04 января 2019 

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

У меня есть таблица с флажками в каждой строке. После щелчка на строке таблицы, флажок установлен или не отмечен. Все в порядке. Но если я нажму точно внутри флажка, он не работает. Спасибо за помощь.

Вот мой код в FIDDLE. https://jsfiddle.net/o9w6v4pu/

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Не думаю, что вам нужно беспокоиться об изменении проверенного состояния. 

$(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>
0 голосов
/ 04 января 2019 

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