suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für einen JQuery-Auswahl-Kontrollkästchen-Methodencode (alles auswählen, inverse Auswahl, keine)_jquery

Beispiel für einen JQuery-Auswahl-Kontrollkästchen-Methodencode (alles auswählen, inverse Auswahl, keine)_jquery

WBOY
WBOYOriginal
2016-05-16 16:02:021294Durchsuche

1. Auswahl der Kontrollkästchenliste

Code: 

<!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. Aktivieren Sie die Kontrollkästchentabelle

Rendering: 

<!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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Diskussion über die Bindung von Jquery-Ereignissen an elements_jqueryNächster Artikel：Eine kurze Diskussion über die Bindung von Jquery-Ereignissen an elements_jquery

In Verbindung stehende Artikel

Mehr sehen