0

我有一个名为Alland的链接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

可能不是您想要的，但它是一种快速的切换方式：

$('a').click(function() {
    var $cbs = $('.case');
    $cbs.prop('checked', !$cbs.prop('checked'));
    return false;
});
于 2013-04-11T06:44:05.057 回答
1 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <a href='' id="link" data-action="all">All</a>
    <input type="checkbox" class="case" value="1"/>
    <input type="checkbox" class="case" value="2"/>
    <input type="checkbox" class="case" value="3"/>
    <input type="checkbox" class="case" value="4"/>
    <input type="checkbox" class="case" value="5"/>
    <div id="status">
        <p id="count">0</p>
    </div>
</body>

<script type="text/javascript">
$("document").ready(function() {
    $("#link").click(function(){
        $a = $(this);
        var action = $a.data('action');
        if(action == "all"){
            $('.case').attr("checked","true");
            $a.text("None").data("action","none");
        }
        if(action == "none"){
            $('.case').removeAttr("checked");
            $a.text("All").data("action","all");
        }
        updatecount();
        return false;
    })
    $(".case").click(function(){
       if($(".case").length == $(".case:checked").length){
            $("#link").text("None").data("action","none");
       }else{
            $("#link").text("All").data("action","all");
       }
       updatecount();
    })
})
var updatecount = function(){
    $("#count").text($(".case:checked").length);
}
</script>
</html>

于 2013-04-11T07:02:16.050 回答
1

试试这个：演示：

<A>在 html 代码中添加标签：

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

将此函数添加到 java-script 代码中：

$(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 回答
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);
 });

请在此处查看工作示例

编辑：名称现在更改 wrt 复选框状态（选中与否）

于 2013-04-11T06:14:16.867 回答
1

尝试以这种方式获取它，我只是猜到了一个<a>带有 id 的链接#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 回答