Question

我已经创建了代码 here 的基本演示。

所需功能：

当我点击tr复选框时，tr应该被检查并且tr应该突出显示。单击复选框时也会发生同样的情况。

问题：

当我点击复选框时，上述功能完全正常。但是当我点击它时它只适用于第一次点击。如果我再次单击tr，则复选框不会再次被检查。

可能是什么问题？请帮忙。

可以在jsfiddle链接上找到Jquery和html。但仍然可以参考：

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');
     }
 });

Answer 1

工作演示 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');
     }
 });

Answer 2

当我将第7行的attr()来电切换为prop()时，我看到了所需的功能：

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

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

选中父元素上的复选框单击

2 个答案: