4

問題があります。チェックボックスがあります。一度に選択したいのですが、カウント結果が間違っています。Firefox、Operaを使用している場合は問題ありませんが、crome、safari、IEを使用している場合は、間違った結果になります。なぜ？私を助けてください。

http://jsfiddle.net/Taslimkhan/kdEmH/2/

ここで設定したコード：

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
      $(document).ready(function () {
        $("input[type=checkbox]").each(function () {
          $(this).change(updateCount);
        });

        updateCount();

        function updateCount () {
          var count = $("input[type=checkbox]:checked").size();

          $("#count").text(count);
          $("#status").toggle(count > 0);
        };
      });
4

3 に答える 3

7

まず、.size()は非推奨です。length代わりにプロパティを使用してください。

.case次に、カウントされるチェックボックスをクラスのあるチェックボックスに制限したい場合があります。

var count = $("input[type=checkbox].case:checked").length;

第三に、コードの記述方法ではupdateCount()、clickイベントではなくイベントを呼び出すchange必要があり、そこで無名関数は必要ありません。

$("input[type=checkbox]").click(updateCount);

jsfiddleの新しいリビジョンを保存しました：http：//jsfiddle.net/kdEmH/8/

于 2013-01-29T20:16:41.770 に答える
1

クリックは、変更せずにキャプチャする正しいイベントです。また、なぜ繰り返し拘束するのですか。document.readyを次のように置き換えます。

$(document).ready(function () {
    $("input").bind('click', function () {
      updateCount();
    });

    updateCount();

    function updateCount () {
        var count = $( "input:checked" ).length;

      $("#count").text(count);
      $("#status").toggle(count > 0);
    };
  });
于 2013-01-29T20:20:53.523 に答える
1

アンジェラが言ったように、変更イベントをリッスンする必要があります。チェックボックスの値が変更された後にクリックが呼び出されるとは限りません。また、フィールドへのタブ移動やスペースのヒットなど、他の理由で値が変わる場合があります。チェックボックスの値をプログラムで設定した後は変更イベントが発生しないことを理解することも重要です。したがって、プログラムで値を設定するときは自分でupdateCountを呼び出す必要があります。したがって、updateCountをクリックにバインドする理由はありません。いずれかのチェックボックスの変更イベントを処理するときに呼び出します。

これはあなたが持っていたもののような完全なスニペットですが、私は常にカウントを表示し続けます

$(function(){
    function updateCount () {
        var count = $("input.case[type=checkbox]:checked").length;
        $("#count").text(count);
    }
    updateCount();

    // add multiple select / deselect functionality
    $("#selectall").change(function() {
        $('.case').prop('checked', this.checked);
        updateCount();
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").change(function(){
        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }
        updateCount();
    });
});
于 2013-01-29T20:35:55.790 に答える