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

check a check box on parent elements click

本文关键字:复选框 单击 元素      更新时间:2023-09-26

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

所需功能:

当我单击里面的 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"属性注册为实际属性,除非它是手动操作的(与本机功能相反:单击复选框)。当然,它始终可用作复选框对象本身的属性。