选中父元素单击上的复选框
check a check box on parent elements click
我在这里创建了一个代码的基本演示。
所需功能:
当我单击里面的 tr 复选框时,应该选中 tr,并且应该突出显示该 tr。当我单击复选框时,也会发生同样的情况。
问题:
当我单击复选框时,上述功能运行良好。但是当我点击 tr 时,它仅适用于第一次点击。如果我再次单击 tr,则复选框不会再次选中。
可能是什么问题?请帮忙。
Jquery和html可以在jsfiddle链接上找到。但这里仍然供参考:
.HTML:
<table border="1" width="100%">
<tbody>
<tr>
<th colspan="4">NEW PRODUCTS FOUND</th>
</tr>
<tr>
<th>Shelf</th>
<th>Product</th>
<th>Corrected</th>
</tr>
<tr class="hover_row hover_row_product pr_row_1">
<td>aa</td>
<td>sdcsd</td>
<td>
<input type="checkbox" class="product_correction" product_id="1">
</td>
</tr>
<tr class="hover_row hover_row_product pr_row_2">
<td>aa</td>
<td>sdcsdc</td>
<td>
<input type="checkbox" class="product_correction" product_id="2">
</td>
</tr>
<tr class="hover_row hover_row_product pr_row_3">
<td>aa</td>
<td>dbfgbdfgb</td>
<td>
<input type="checkbox" class="product_correction" product_id="3">
</td>
</tr>
</tbody>
</table>
.JS:
/*Correction proccess*/
$('.hover_row_product').click(function (e) {
var checkbox = $(this).find(':checkbox');
if ($(e.target).closest('input[type="checkbox"]').length > 0) {
//check box clicked
} else {
checkbox.attr('checked', !checkbox.attr('checked'));
}
$prod_id = checkbox.attr('product_id');
$input_checked = 2;
if (checkbox.is(':checked')) {
$input_checked = 1;
$('.pr_row_' + $prod_id).addClass('corrected_row');
} else {
$input_checked = 0;
$('.pr_row_' + $prod_id).removeClass('corrected_row');
}
});
工作演示 http://jsfiddle.net/78qzH/或警报 http://jsfiddle.net/HfYZe/的
厕所使用.prop
而不是.attr
。
此外,如果你热衷于: .prop() vs .attr()
希望这符合您的需求! :)
法典
/*Correction proccess*/
$('.hover_row_product').click(function (e) {
var checkbox = $(this).find(':checkbox');
if ($(e.target).closest('input[type="checkbox"]').length > 0) {
//check box clicked
} else {
checkbox.prop('checked', !checkbox.prop('checked'));
}
$prod_id = checkbox.attr('product_id');
$input_checked = 2;
if (checkbox.is(':checked')) {
$input_checked = 1;
$('.pr_row_' + $prod_id).addClass('corrected_row');
} else {
$input_checked = 0;
$('.pr_row_' + $prod_id).removeClass('corrected_row');
}
});
当我将第 7 行的attr()
调用切换到prop()
时,我看到了所需的功能:
checkbox.prop('checked', !checkbox.prop('checked'));
也许其他人可以提供来源,但我不相信浏览器会总是将"checked"属性注册为实际属性,除非它是手动操作的(与本机功能相反:单击复选框)。当然,它始终可用作复选框对象本身的属性。
相关文章:
- 如何防止jQuery中复选框单击时执行多个代码
- 复选框单击功能不起作用
- 复选框单击覆盖表行单击
- 如果父项具有onclick绑定,则复选框单击将被忽略
- 在数据网格中的复选框单击时使用 Databinder.Eval
- 切换复选框 - 单击父 DIV 元素
- 如何调用文本框代码隐藏文本更改事件从复选框单击位于网格视图行内
- 在复选框单击时清理我的jQuery代码
- 复选框单击事件处理程序和显示/隐藏功能
- 保留 Google 地图在复选框单击时缩放到 kml 图层
- 复选框单击事件 jQuery 不起作用
- jQgrid:禁用复选框单击,仅在单击复选框时选中复选框
- 复选框单击的限制
- 计数 + / - 用于复选框单击和取消单击
- 放大复选框单击区域
- 复选框单击功能不起作用
- 根据复选框单击更改表单输入的值
- 复选框单击有效,取消选中复选框不工作Javascript
- 需要在webforms-ascx复选框单击事件上以特定方式激发事件
- Ext.grid.EditorGridPanel中的复选框(单击一次可触发编辑后事件)