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

2019-11-20 12:36:01

字体：大中小

来源：转载

供稿：网友

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>

上一篇：Javascript非构造函数的继承

下一篇：jquery简单的弹出层浮动层代码