HTML:
<table class="vi_table">
<thead>
<tr>
<th><input type="checkbox" class="v_checkbox"/>Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">
CSS:
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
J查询:
$(document).ready(function () {
$(document).on('click', '.vi_table tbody tr', function (e) {
var submit = $('#percentage_submit_button');
var checked= $(this).find('input[type="checkbox"]');
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
if($('.v_checkbox').is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
submit.prop('disabled', true);
}
});
$(document).on('click', 'input[type="checkbox"]', function () {
$(this).prop('checked', !$(this).is(':checked'));
$(this).parent('tr').toggleClass('selected'); // or anything else for highlighting purpose
});
});
我想通过单击行
上的任意位置(包括复选框)来选择复选框
。如果在 tbody
中选择了任何一个复选框,我想启用
和禁用
按钮
。
单击全选复选框
需要选择所有行并启用该按钮。
我在选择和取消选择复选框时仍然遇到一些问题。
我给出了到目前为止我尝试过的例子,但我想让它像非重复代码一样干净。我怎样才能使这段代码更简单、更有效?
谢谢
最佳答案
进行了一些更改,使复选框对齐。有关详细信息,请参阅代码注释:
Fiddle万一代码片段不起作用
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checkbox = $(this);
if ($(this).is('tr')) {
checkbox = $(this).find('input[type="checkbox"]');
}
submit.prop('disabled', true); // Disable submit button
checkbox.prop('checked', !checkbox.is(':checked')); // Change checked property
if (checkbox.hasClass('all')) { // If this is "all"
$('.v_checkbox:not(.all)').prop('checked', checkbox.is(':checked')); // Set all other to same as "all"
if (checkbox.is(':checked')) { // change colour of "all" tr
checkbox.closest('tr').addClass('diff_color');
} else {
checkbox.closest('tr').removeClass('diff_color');
}
}
var blnAllChecked = true; // Flag all of them as checked
$('.v_checkbox:not(.all)').each(function() { // Loop through all checkboxes that aren't "all"
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.prop('disabled', false); // enable submit if one is checked
} else {
$(this).closest('tr').removeClass('diff_color');
blnAllChecked = false; // If one is not checked, flag all as not checked
}
});
if (blnAllChecked) {
$('.v_checkbox.all').closest('tr').addClass('diff_color');
$('.v_checkbox.all').prop('checked', true);
} else {
$('.v_checkbox.all').closest('tr').removeClass('diff_color');
$('.v_checkbox.all').prop('checked', false);
}
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="vi_table">
<thead>
<tr class="pv">
<th>
<input type="checkbox" class="v_checkbox all" />Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">
关于javascript - 单击表格行以选择复选框并禁用/启用按钮 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29916417/