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

When I will click on a href link it will check all checkbox after related this link

本文关键字：链接 关联 复选框 href 一个      更新时间：2023-09-26

我有一个名为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/

尝试这样做，我只是猜测了一个id为#allNone的链接<a>，并使用.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);
});

演示

在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复选框状态(已选中或未选中(

试试这个：演示：

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

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

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

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

相关文章：