1

私はjQueryに少し慣れていません。次のコードの動作、特にリセット ボタンに問題があります。

<script>
$(function() 
{
    $(document).ready(function()
    {
        $("input[type=checkbox][checked]").each(
        function()
        {
            var cell = $(this).closest('td');
            if($(this).attr('checked'))
            {
                cell.toggleClass('check');
            }
        });
    });
    $('#bay :checkbox').click(function() 
    {
        var cell = $(this).closest('td');
        cell.toggleClass('check');
    }).change();
    $('#reset').click(function()
    {   
    $('#bay input[type=checkbox]').each(function()
    {
        var cell = $(this).closest('td');
        if ($(this).is('checked'))
        {
        //alert("yes");
            cell.addClass('check');

        }
        else
        {
            cell.removeClass('check');
        //alert("no");

        }
        });
    });
});
</script>

<input type="checkbox" checked>Blah

リセットボタンをクリックすると、なぜかスクリプトが cell.addClass の if 文だけを実行してしまいます。基本的に、リセット ボタンは復元として機能し、HTML コードに default 属性がない場合は、追加されたクラス #check を each から削除する必要があります。

入力チェックボックスをチェック済みの属性でチェックする非効率的な方法を試してみましたが、FF と Chrome では問題なく動作しましたが、IE では失敗しました。リセットボタンを2回押した場合にのみ機能します。

$('#reset').click(function()
{   

    $("input[type=checkbox][checked]").each(
    function()
    {
        var cell = $(this).closest('td');
        cell.addClass('check');
    });
    $("input[type=checkbox]:not([checked])").each(
    function()
    {
        var cell = $(this).closest('td');
        cell.removeClass('check');
    });
});

どんな助けでも大歓迎です！

編集:リクエストごとに、以下は HTML コードのサンプルであり、動作する (しかし非効率的) jQuery コードhttp://jsfiddle.net/uxjCT/9/です。

Edit2:*コードの「リセット」部分を少し簡略化しましたが、それでも IE では機能しません。これが特に解決できないIEの問題であるかどうかは誰にもわかりますか? 基本的に、スタイルシートとともに、HTML に属性を持つ入力チェックボックスに対して、リセット機能をデフォルトの HTML「チェック済み」属性にリセットしようとしています。IE は、現在苦痛を感じている唯一の犯人です。

$('#reset').click(function(){   

$('#bay input[type=checkbox]').each(function()
{
    var attr = $(this).is("[checked]");
    var cell = $(this).closest('td');

    if (typeof attr !== 'undefined' && attr !== false)
    {
        alert("checked");
        cell.addClass('check');
    }
    else
    {
        alert("unchecked");
        cell.removeClass('check');
    }
    });
});

何らかの理由var attr = $(this).is("[checked]");で、 は HTML の「checked」属性を取得しませんが、チェックボックスがチェックされている場合は取得します。これは、デフォルトの HTML 属性とは異なる場合があります。

繰り返しますが、助けていただければ幸いです。

デモコード: http://jsfiddle.net/uxjCT/55/

4

3 に答える 3

2

チェックボックスがチェックされているかどうかを確認するコードは次のとおりです。

$(this).is(':checked')

いいえ

$(this).is('checked')

コードはこの変更で機能します。

于 2011-05-03T06:10:10.473 に答える
1

これを試して... 

 $('#reset').click(function(){   

         cell.removeClass('check');//First remove class from all cell
        $('#bay :checked').each(function()
        {
                cell.addClass('check');//add class only to checked cells

        });
    });
于 2011-05-03T06:17:26.410 に答える
1

これはうまくいくはずです。コードを少し変更する

$('#reset').click(function(){   
    $('#bay input:checkbox').each(function()
    {
        var cell = $(this).closest('td');

        if (this.checked)
        {
            //alert("yes");
            cell.addClass('check');
        }
        else
        {
            cell.removeClass('check');
            //alert("no");

        }
    });
});

動作デモを試すことができます。

于 2011-05-03T05:59:51.090 に答える