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

2019/6/29 22:27:55

编程Tag： jQuery 全选 checkbox 反选全不选选中

本文主要是介绍JQuery选中checkbox方法代码实例（全选、反选、全不选），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

这篇关于JQuery选中checkbox方法代码实例（全选、反选、全不选）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章