1

我在这里创建了我的代码的基本演示。

所需功能：

当我单击 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');
     }
 });
4

2 回答 2

2

工作演示 http://jsfiddle.net/78qzH/ 或警报http://jsfiddle.net/HfYZe/这个厕所

使用.prop而不是.attr.

如果您热衷于：.prop() 与 .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');
     }
 });
于 2013-11-10T08:11:09.747 回答
0

当我将第attr()7 行的呼叫切换到prop()：

checkbox.prop('checked', !checkbox.prop('checked'));

也许其他人可以提供一个来源，但我不相信浏览器将始终将“已检查”属性注册为实际属性，除非它是手动操作的（与本机功能相反：单击复选框）。当然，它始终可以作为复选框对象本身的属性使用。

于 2013-11-10T08:14:44.830 回答