复选框在 table 行中不起作用,具有 jQuery 选中取消选中功能
Checkbox doesnot work in table rows with jQuery check uncheck function
$(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>
我 table 每行都有复选框。单击 table 行后,复选框被选中或未选中。那没问题。但是,如果我正好在复选框内单击,它就不起作用。谢谢你的帮助。
这是我在 FIDDLE 中的代码。 https://jsfiddle.net/o9w6v4pu/
$(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>
我认为您不必担心更改选中状态。
$(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>
$(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>
我 table 每行都有复选框。单击 table 行后,复选框被选中或未选中。那没问题。但是,如果我正好在复选框内单击,它就不起作用。谢谢你的帮助。
这是我在 FIDDLE 中的代码。 https://jsfiddle.net/o9w6v4pu/
$(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>
我认为您不必担心更改选中状态。
$(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>