0

と という名前のリンクがAllありnoneます。をクリックするとAll、それに関連するすべてのチェックボックスをオンにして、リンクテキストを に変更しますnone。

もう一度クリックすると、すべてのチェックボックスがオフになります。

チェックボックスですべてのボックスをチェックするために使用できるコードがいくつかあります。しかし今、リンクのあるすべてのボックスをチェックしたいと思います。見てください、これがこのデモコードです（jsfiddle にもあります）：

    <script type="text/javascript">
    $(function(){

    // 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]").click(updateCount);

        updateCount();

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

          $("#count").text(count);
          $("#status").toggle(count > 0);
        };
      });
    </script>enter code here
  </head>
  <body>
    <H2>why counting wrong in crome, Ie </H2>

select all
    <input type="checkbox" id="selectall"/>
    <input type="checkbox" class="case" name="case" value="1"/>
    <input type="checkbox" class="case" name="case" value="2"/>
    <input type="checkbox" class="case" name="case" value="3"/>
    <input type="checkbox" class="case" name="case" value="4"/>
    <input type="checkbox" class="case" name="case" value="5"/>
    <div id="status">
      <p id="count">0</p>
    </div>
  </body>




http://jsfiddle.net/kdEmH/24/
4

5 に答える 5

1

この方法で取得してみてください。IDのリンク<a>を推測し、チェックボックスをチェックおよびチェック解除する機能を#allNone配置しました：.prop()

$('#allNone').on('click', function (e) {
e.preventDefault();
(this.text == 'Check All') ? 
    $(this).text('Check None').nextAll('.case').prop('checked', true) :
    $(this).text('Check All').nextAll('.case').prop('checked', false);
});

デモ

于 2013-04-11T06:23:39.247 に答える
1

あなたが探しているものではないかもしれませんが、トグルを行う簡単な方法です:

$('a').click(function() {
    var $cbs = $('.case');
    $cbs.prop('checked', !$cbs.prop('checked'));
    return false;
});
于 2013-04-11T06:44:05.057 に答える
1

HTML 部分に、次のようなリンクを追加します。

<a href="#" id="select_all_link" title="Select all">Click me to toggle all checkboxes</a>

Javascript 部分に、次を追加します。

 $("a#select_all_link").click(function(){
   if($('.case:checked').length > 0)
      $('.case').attr('checked', false);
   else
      $('.case').attr('checked', true);
 });

こちらの作業例をご覧ください

編集：チェックボックスの状態（チェックされているかどうか）で名前が変更されました

于 2013-04-11T06:14:16.867 に答える
1

これを試してください:デモ:

<A>タグを HTML コードに追加します。

<a id="selectall" href="#">select all</a>

この関数を Java スクリプト コードに追加します。

$(function(){
  var state=true;
$("#selectall").click(function () {
      $('.case').attr('checked', state);
    state=!state;
    var obj = document.getElementById("selectall");
    if(state)
    {
         obj.innerText="select all";
    }
    else
    {
         obj.innerText="clear all";
    }
});

完全なコード

    $(function(){
      var state=true;
    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', state);
  state=!state;
        var obj = document.getElementById("selectall");
        if(state)
        {
             obj.innerText="select all";
        }
        else
        {
             obj.innerText="clear all";
        }
    });


    // 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]").click(updateCount);

        updateCount();

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

          $("#count").text(count);
          $("#status").toggle(count > 0);
        };
      });
于 2013-04-11T06:15:51.083 に答える