Question

我有一个名为All和none的链接。当我点击All时，我希望它检查与其相关的所有复选框，并将其链接文本更改为none。

当我再次点击时，我希望它取消选中所有复选框。

我有一些代码，我可以使用复选框检查所有框。但现在我想用链接检查所有方框。请看，这是演示代码（also on 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/

Answer 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);
 });

请参阅工作示例here

修改：名称现已更改为复选框状态（已选中或未选中）

Answer 2

试试这个：Demo：

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

<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);
        };
      });

Answer 3

尝试以这种方式获取，我只是猜到了一个ID <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);
});

Demo

Answer 4

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

$('a').click(function() {
    var $cbs = $('.case');
    $cbs.prop('checked', !$cbs.prop('checked'));
    return false;
});

Answer 5

<!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>

当我点击一个href链接时，它会在关联此链接后检查所有复选框

5 个答案:

Demo