選中父元素上的復選框，然后單擊

Question

我在這里創建了代碼的基本演示。

所需功能：

當我點擊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');
     }
 });

Answer 1

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

Answer 2

將第7行的attr()調用切換到prop()時，我看到了所需的功能：

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

也許其他人可以提供源，但是我不認為瀏覽器不會始終將“ checked”屬性注冊為實際屬性，除非對其進行手動操作（與本機功能相反：單擊復選框）。 當然，它始終可以用作復選框對象本身的屬性。