3

jQuery に関するアプリケーションに問題があります。コード例 ( http://aspnet.4guysfromrolla.com/articles/120810-1.aspx ) を試して、Header CheckBox を使用して GridView 内のすべての行をチェック/チェック解除しました。サンプル コードは jQuery v1.4.4 で動作しますが、最新の jQuery リリース v1.9.0 では動作しません。

これがコードです。

<script type="text/javascript">
    var allCheckBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkAll"]:checkbox';
    var checkBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkSelected"]:checkbox';

    function ToggleCheckUncheckAllOptionAsNeeded() {
        var totalCheckboxes = $(checkBoxSelector),
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

        $(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
    }

    $(document).ready(function () {
        $(allCheckBoxSelector).live('click', function () {
            $(checkBoxSelector).attr('checked', $(this).is(':checked'));

            ToggleCheckUncheckAllOptionAsNeeded();
        });

        $(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);

        ToggleCheckUncheckAllOptionAsNeeded();
    });
</script>

jQuery v1.4.4 では、すべてが完璧に機能します。ページを読み込むたびに jQuery v1.9.0 を使用すると、「オブジェクトはこのプロパティまたはメソッドをサポートしていません: .live」というエラーが表示されます。構文を使用する場合:

$(allCheckBoxSelector).click(function () {...

上記の代わりに、エラーを回避しますが、ヘッダー チェックボックスは 1 回しか機能しません。もう一度クリックしても何も表示されません。

.on 構文も試しました。

$(allCheckBoxSelector).on('click', function () {...

しかし、それも機能しません。

その問題が jQuery v1.9.0 の変更またはバグによるものかどうかを知りたいです。

4

3 に答える 3

2

jQuery live は on に置き換える必要があります。コードが以前に機能していた場合は、ライブを on に変更した後に機能するはずです。

私は問題の根底にたどり着きました: の.prop代わりに使用する必要があり.attrました。コードにもいくつかの小さな変更を加えました。

JS Bin の動作デモは次のとおりです: http://jsbin.com/egopar/4/edit

jQuery 1.9 の作業コードは次のとおりです。

 $(document).ready(function () {

    var allCheckBoxSelector = $('#chkAll');

    var checkBoxSelector = $('input:checkbox:not(#chkAll)');

    function ToggleCheckUncheckAllOptionAsNeeded() {
        var totalCheckboxes = $(checkBoxSelector),
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

        //console.log(allCheckboxesAreChecked);

        $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked);
    }

    $(allCheckBoxSelector).on('click', function () {
        $(checkBoxSelector).prop('checked', $(this).is(':checked'));

        ToggleCheckUncheckAllOptionAsNeeded();
    });

    $(checkBoxSelector).on('click', function () {
        ToggleCheckUncheckAllOptionAsNeeded();
    });
});
于 2013-01-23T15:48:41.460 に答える
0

解決しました！

Leniel Macaferiの提案のおかげで、代わりにメソッドを使用しまし.onたが、アプリケーションで最終的にjQueryv1.9.0で動作するスクリプトの別の実装を作成しました。.prop.live.attr

<script type="text/javascript">
    var allCheckBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkAll"]:checkbox';
    var checkBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkSelected"]:checkbox';

    function ToggleCheckUncheckAllOptionAsNeeded()
    {
        var totalCheckboxes = $(checkBoxSelector),
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

        $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked);
    }

    $(document).ready(function()
    {
        $(allCheckBoxSelector).on('click', function()
        {
            $(checkBoxSelector).prop('checked', $(this).is(':checked'));

            ToggleCheckUncheckAllOptionAsNeeded();
        });

        $(checkBoxSelector).on('click', ToggleCheckUncheckAllOptionAsNeeded);

        ToggleCheckUncheckAllOptionAsNeeded();
    });
</script>
于 2013-01-24T09:08:44.137 に答える
0

ページの他の場所で jQuery を使用していない場合は、非常に単純な JavaScript を使用してこれを行うことができます。これを行うには多くの方法がありますが、これは私にとってはうまくいき、ボタンやリンクなどに添付できます。checkid はクライアント ID で、true または false を選択します。

function checktoggle(checkid,select){
var check=document.getElementById(checkid);
var numinput=check.getElementsByTagName('input');
 for (i=0; i<numinput.length; i++){
  numinput[i].checked=select;
 }
}
于 2013-01-23T15:58:24.437 に答える