JQuery选中checkbox方法代码实例（全选、反选、全不选）

前端技术 2023/09/09 JavaScript

1、checkbox list选择

代码：

<!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 runat=\"server\">
  <title></title>
  <script src=\"Scripts/jquery-1.7.min.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\">
    $(function () {
      // 全选
      $(\"#btnCheckAll\").bind(\"click\", function () {
        $(\"[name = chkItem]:checkbox\").attr(\"checked\", true);
      });
 
      // 全不选
      $(\"#btnCheckNone\").bind(\"click\", function () {
        $(\"[name = chkItem]:checkbox\").attr(\"checked\", false);
      });
 
      // 反选
      $(\"#btnCheckReverse\").bind(\"click\", function () {
        $(\"[name = chkItem]:checkbox\").each(function () {
          $(this).attr(\"checked\", !$(this).attr(\"checked\"));
        });
      });
 
      // 全不选
      $(\"#btnSubmit\").bind(\"click\", function () {
        var result = new Array();
        $(\"[name = chkItem]:checkbox\").each(function () {
          if ($(this).is(\":checked\")) {
            result.push($(this).attr(\"value\"));
          }
        });
 
        alert(result.join(\",\"));
      });
    });
  </script>
</head>
<body>
  <div>
    <input name=\"chkItem\" type=\"checkbox\" value=\"今日话题\" />今日话题
    <input name=\"chkItem\" type=\"checkbox\" value=\"视觉焦点\" />视觉焦点
    <input name=\"chkItem\" type=\"checkbox\" value=\"财经\" />财经
    <input name=\"chkItem\" type=\"checkbox\" value=\"汽车\" />汽车
    <input name=\"chkItem\" type=\"checkbox\" value=\"科技\" />科技
    <input name=\"chkItem\" type=\"checkbox\" value=\"房产\" />房产
    <input name=\"chkItem\" type=\"checkbox\" value=\"旅游\" />旅游
  </div>
  <div>
    <input id=\"btnCheckAll\" type=\"button\" value=\"全选\" />
    <input id=\"btnCheckNone\" type=\"button\" value=\"全不选\" />
    <input id=\"btnCheckReverse\" type=\"button\" value=\"反选\" />
    <input id=\"btnSubmit\" type=\"button\" value=\"提交\" />
  </div>
</body>
</html>

2、checkbox table选中

效果图：

<!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 runat=\"server\">
  <title></title>
  <style type=\"text/css\">
    table
    {
      border-collapse: collapse;
    }
    td
    {
      border: 1px solid #ccc;
    }
  </style>
  <script src=\"Scripts/jquery-1.7.min.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\">
    $(function () {
      // chkAll全选事件
      $(\"#chkAll\").bind(\"click\", function () {
        $(\"[name = chkItem]:checkbox\").attr(\"checked\", this.checked);
      });
 
      // chkItem事件
      $(\"[name = chkItem]:checkbox\").bind(\"click\", function () {
        var $chk = $(\"[name = chkItem]:checkbox\");
        $(\"#chkAll\").attr(\"checked\", $chk.length == $chk.filter(\":checked\").length);
      })
    });
  </script>
</head>
<body>
  <table id=\"tb\">
    <thead>
      <tr>
        <td>
          <input id=\"chkAll\" type=\"checkbox\" />
        </td>
        <td>
          分类名称
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"今日话题\" />
        </td>
        <td>
          今日话题
        </td>
      </tr>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"视觉焦点\" />
        </td>
        <td>
          视觉焦点
        </td>
      </tr>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"财经\" />
        </td>
        <td>
          财经
        </td>
      </tr>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"汽车\" />
        </td>
        <td>
          汽车
        </td>
      </tr>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"科技\" />
        </td>
        <td>
          科技
        </td>
      </tr>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"房产\" />
        </td>
        <td>
          房产
        </td>
      </tr>
      <tr>
        <td>
          <input name=\"chkItem\" type=\"checkbox\" value=\"旅游\" />
        </td>
        <td>
          旅游
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>


本文地址：https://www.stayed.cn/item/26231

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案