Question

我正在尝试编写一个jQuery脚本（我之前从未编写过一个脚本，我需要帮助）。详情如下;我有一个带复选框的表格。每个复选框都有不同的ID和名称，我将根据自己的编程原因进行操作。我只想要计算复选框的数量，只需在固定的div中右侧显示它。只有在勾选第一个复选框后才能显示div。我怎样才能做到这一点？我的示例复选框是：

<input type="checkbox" name="check_box_no_2" id="check_box_no_2" value="some_important_value">

复选框名称是增量的。意思是下一个将是check_box_no_3。请帮忙......

到目前为止，我一直在摆弄

$("input[type=checkbox][checked]").each( 
    function() { 
       // Insert code here 
    } 
);

但这似乎不适用于FireFox。

Answer 1

要选中选中的复选框，您需要:checked psuedo-class。您还需要观察每个复选框，并在其设置更改时更新计数并显示或隐藏div。这是一种方法：

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

#count是显示计数的元素（可能是段落标记），#status是您要显示/隐藏的div。

完整的HTML示例，供参考：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(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);
        };
      });
    </script>
  </head>
  <body>
    <ul>
      <li><input type="checkbox"> One</li>
      <li><input type="checkbox"> Two</li>
      <li><input type="checkbox"> Three</li>
    </ul>

    <div id="status">
      <p id="count">0</p>
    </div>
  </body>
</html>

Answer 2

试试这个：

var totalChecked        = 0;
$("input[type=checkbox]:checked").each(function(){
   totalChecked++;
});                                    
if(totalChecked > 0){
   $("div.display").css("display,block");
   $("div.display").text(totalChecked);
}else{
   $("div.display").css("display,none");
}

计算已检查复选框的数量，并使用jQuery在固定div上显示它们

2 个答案: