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() 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');
     }
 });
于 2013-11-10T08:11:09.747 に答える
0

attr()ライン 7のコールを に切り替えると、目的の機能が表示されprop()ます。

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

おそらく他の誰かがソースを提供することができますが、手動で操作しない限り、ブラウザーが常に「チェック済み」属性を実際の属性として登録するとは思いません (ネイティブ機能とは対照的に: チェックボックスをクリックします)。もちろん、チェックボックスのオブジェクト自体のプロパティとしていつでも利用できます。

于 2013-11-10T08:14:44.830 に答える