jQuery全选/全消CheckBox以及JS回调一例

最新推荐文章于 2025-08-14 17:31:00 发布

转载最新推荐文章于 2025-08-14 17:31:00 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/angushine/archive/2009/10/22/1588267.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一种使用JavaScript实现全选与单选功能的方法，并通过具体示例展示了如何在网页表单中操作复选框。此外，还提供了一个简单的回调函数示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://www.cnblogs.com/scripts/jquery/jquery.js"></script>
</head>
<body>
  <form id="form1" runat="server">
  <input type="checkbox" id="cbAll" name="cbAll" onclick="changeAll(this.checked, 'cb')"/><br />
  <input type="checkbox" id="cb_1" name="cb" value="1,11" onclick="changeItem(this, 'cbAll')"/><br />
  <input type="checkbox" id="cb_2" name="cb" value="2,22" onclick="changeItem(this, 'cbAll')"/><br />
  <input type="checkbox" id="cb_3" name="cb" value="3" onclick="changeItem(this, 'cbAll')"/><br />
  <input type="checkbox" id="cb_4" name="cb" value="4" onclick="changeItem(this, 'cbAll')"/><br />

  <hr />
  <input type="checkbox" id="chkAll" name="chkAll" onclick="changeAll(this.checked, 'chk')"/><br />
  <input type="checkbox" id="chk_1" name="chk" value="a" onclick="changeItem(this, 'chkAll')"/><br />
  <input type="checkbox" id="chk_2" name="chk" value="b" onclick="changeItem(this, 'chkAll')"/><br />
  <input type="checkbox" id="chk_3" name="chk" value="c" onclick="changeItem(this, 'chkAll')"/><br />
  <input type="checkbox" id="chk_4" name="chk" value="d" onclick="changeItem(this, 'chkAll')"/><br />

  <input type="button" value="Get" onclick="getItems()" />

  <script type="text/javascript">
    // 全选/全取消
    function changeAll(value, itemname) {
      $("input[type='checkbox'][name='" + itemname + "']").each(function(i) {
        $(this).attr("checked", value);
      });
    }

    // 选中/取消单个
    function changeItem(obj, itemall) {
      var value = obj.checked;
      var name = obj.name;
      if (!value) {
        $('#' + itemall).attr("checked", value);
      } else {
        // 在这里可以用length和size()来比较
        var checked = ($("input[type='checkbox'][name='" + name + "']").length ==
          $("input[type='checkbox'][name='" + name + "']:checked").size());
        $('#' + itemall).attr("checked", checked);
      }
    }

    function getItems() {
      //alert($("input[type='checkbox']").length);
      $("input[type='checkbox'][name='cb']").each(function(i) {
        if ($(this).attr("checked")) alert($(this).val());
      });
    }
  </script>

  <div style="height: 20px; border-style: dashed; border-width: 1px;">
  </div>

  <h1>回调函数</h1>
  <script type="text/javascript">
    function add(a, callback){
      var b = callback;
      alert(a + b);
    }
    function negative(c) {
      return (-c);
    }
  </script>
  <input type="Submit" name="Submit" value="Submit" onclick="add(4, negative(3));"/>
  </form>
</body>
</html>

转载于:https://www.cnblogs.com/angushine/archive/2009/10/22/1588267.html