4

私はこのコードをstackoverflowから取得しました。これは、非常に優れた「すべて選択」チェックボックスソリューションのように見えますが、2回目のクリック後に失敗する理由はありますか?

http://jsfiddle.net/R9zjk/2/

<table>
    <tr>
        <td>
            <input type='checkbox' value='0' class=''>
        </td>
        <td>
            <input type='checkbox' value='0' class=''>
        </td>
        <td>
            <input type='checkbox' value='0' class=''>
        </td>
        <td width="100" align="right">
            select all <input type='checkbox' value='0' class='selectall2'>
        </td>
    </tr>
</table>

$(document).ready(function () {


    $(document).on("click", ".selectall2", function () {


        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);


    });



});
4

5 に答える 5

19

上記の jQuery 1.6.prop()の代わりに使用.attr()

jQuery 1.6 を使用している場合、コードif ( $(elem).attr("checked") )は実際の content属性を取得します。これは、チェックボックスをオンまたはオフにしても変化しません。これは、checked プロパティのデフォルト値または初期値を格納するためだけのものです。下位互換性を維持するために.attr()、jQuery 1.6.1+ のメソッドはプロパティを取得して更新するため、ブール属性のコードを に変更する必要はありません.prop()。それにもかかわらず、チェックされた値を取得するための推奨される方法は、上記のオプションのいずれかを使用することです。これが最新の jQuery でどのように機能するかを確認するには、以下の例のチェックボックスをオンまたはオフにします。

見る.prop()

デモ - http://jsfiddle.net/f9QYx/

于 2013-02-07T09:17:12.960 に答える
0

いくつかの問題が解決されましたここでライブデモを見てください

HTML コードは次のとおりです。

<table>
    <tr>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td width="100" align="right">
            select all <input type='checkbox' value='0' class='selectall2'>
        </td>
    </tr>
</table>

Javascriptは次のとおりです。

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);
    });
    $(document).on("click",".abc",function(){
        var temp=0;
        if(!$(".abc").attr('checked'))
        {
            temp=1;
        }
        if(temp==0)
        {
                    $(".selectall2").attr('checked',true);
        }
        else
        {
                    $(".selectall2").attr('checked',false);
        }
    });
});
于 2013-02-07T09:56:58.657 に答える
0

あなたのコードは jQuery 1.9 では動作しません。これは、使用している jQuery バージョンのフレームワークが原因です。1.8.3 を選択すると動作します。

ライブデモ

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);
    });
});

jQuery 1.6以降では attr の代わりに prop を使用する必要があります

ライブデモ

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').prop('checked', this.checked);
    });
});

jQuery 1.6 以降、.attr() メソッドは、設定されていない属性に対して undefined を返します。フォーム要素のチェック済み、選択済み、または無効な状態などの DOM プロパティを取得および変更するには、.prop() メソッド、jQuery docを使用します。

于 2013-02-07T09:24:00.353 に答える
0

使ってみて.attr('checked', 'checked')

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', 'checked');
    });
});
于 2013-02-07T09:33:42.710 に答える