javascript - 创建一个勾选框，然后通过单击自动勾选所有其他勾选框，并显示一个按钮

Question

所以，我正在尝试创建一个具有此操作的复选框:

1. chkAll 框，一旦被勾选，所有其他复选框也会被勾选。
2. 执行此操作时，会出现一个按钮。

然后，我要实现的另一个操作是，如果勾选了两个或多个复选框(不包括 chkAll 框)，同样的按钮也会出现。这个按钮就像一个 zip 文件按钮，因此，只有当多个复选框被勾选时，它才会出现(启用以供使用)。

目前我面临的错误是，1.chkAll复选框需要双击才会出现按钮。

2.当我取消选中 chkAll 复选框时，该按钮确实消失了，但其他复选框仍处于选中状态，它们应该也未选中。

3.当超过1个复选框被勾选时，按钮不出现。

我是 php 和 jquery 的新手，非常感谢您的任何指导。谢谢。

function toggleTick_Change() {
  $('input[type=checkbox]').change(function() {
    if ($("#chkAll").prop("checked")) {
      $('input[type=checkbox]').prop('checked', $(this).prop("checked"));
      $("#conditional-part").show();
    } else if ($("#chkT").prop("checked")) {
      if ($("#chkT").length > 1) {
        $("#conditional-part").show();
      } else {
        $("#conditional-part").hide();
      }
    } else {
      $("#conditional-part").hide();
    }

  });
}

#conditional-part {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="content">
  <div class="container">

    <div id="page-container">

      <div id="page-header">
        <h3>Manage Deliveries</h3>
      </div>
      <div id="page-content">
        <table align="center">
          <tr id="conditional-part">
            <td class="input-group " role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
              <input type="number" class="form-control input-xs" id="cpyCN{$rows.id}" name="cpyCN{$rows.id}" value="1" style="font-family: Raleway, Tahoma, Arial; font-size: 8pt; padding: 2px 2px 2px 10px;" placeholder="Copies" min="1" max="999" />

              <span class="input-group-btn">
                                <button id="btnPrintCNTicked{$rows.id}" type="button" class="btn btn-primary btn-xs" style="width: 40px;"
                                    onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
                            </span>
            </td>
          </tr>
        </table>

        <div class="table-responsive" style="margin-top: 10px;">
          <table class="table table-hover table-bordered" style="font-size: 8pt;">
            <thead>
              <tr class="panel-default" style="height: 30px;">
                <th style="width: 20px;">
                  <input type="checkbox" id="chkAll" style="width: 15px; height: 15px;" onchange="toggleTick_Change()" />
                </th>
                <th style="width: 40px;">
                  #
                </th>
                <th style="width: 140px;">
                  DELIVERY NO / <br>DATE / TYPE
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="panel-default" style="height: 30px;">
                <th style="width: 20px;">
                  <input type="checkbox" id="chkT" style="width: 15px; height: 15px;" onchange="toggleTick_Change()" />
                </th>
                <th style="width: 140px;">
                  abcd
                </th>
              </tr>
              <tr class="panel-default" style="height: 30px;">
                <th style="width: 20px;">
                  <input type="checkbox" id="chkT" style="width: 15px; height: 15px;" onchange="toggleTick_Change()" />
                </th>
                <th style="width: 140px;">
                  1234
                </th>
              </tr>
            </tbody>
          </table>
        </div>
        <!--/id -page content-->
      </div>
      <!--/id -page container-->
    </div>
    <!-- /container -->
  </div>
  <!-- /content -->

Answer 1

你应该知道的两件事:

• #id 应谨慎使用(最好根本不用)，我已将所有 #id 更改为类(除了丑陋的按钮和输入)。频繁使用 #id 会阻碍您将来的代码。如果您使用 jQuery，则尤其如此。

• 不鼓励使用 onEvent 属性处理程序，尤其是当您使用 jQuery 时。

<button onclick="doNOTUseThisEventHandler()">...</button>

$(document).ready(function() {
  $(".chkAll").on('change', function(event) {
    if ($(this).is(":checked")) {
      $('.chkT').prop('checked', true);
      $(".conditional-part").show();
    } else {
      $('.chkT').prop('checked', false);
      $(".conditional-part").hide();
    }
  });
});

.conditional-part {
  display: none;
}

<div class="content">
  <div class="container">

    <div class="page-container">

      <div class="page-header">
        <h3>Manage Deliveries</h3>
      </div>
      <div class="page-content">
        <table align="center">
          <tr class="conditional-part">
            <td class="input-group " role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
              <input type="number" id="form-control input-xs" class="cpyCN{$rows.id}" name="cpyCN{$rows.id}" value="1" style="font-family: Raleway, Tahoma, Arial; font-size: 8pt; padding: 2px 2px 2px 10px;" placeholder="Copies" min="1" max="999" />

              <span class="input-group-btn">
                                <button id="btnPrintCNTicked{$rows.id}" type="button" class="btn btn-primary btn-xs" style="width: 40px;"
                                    onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
                            </span>
            </td>
          </tr>
        </table>

        <div class="table-responsive" style="margin-top: 10px;">
          <table class="table table-hover table-bordered" style="font-size: 8pt;">
            <thead>
              <tr class="panel-default" style="height: 30px;">
                <th style="width: 20px;">
                  <input type="checkbox" class="chkAll" style="width: 15px; height: 15px;">
                </th>
                <th style="width: 40px;">
                  #
                </th>
                <th style="width: 140px;">
                  DELIVERY NO / <br>DATE / TYPE
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="panel-default" style="height: 30px;">
                <th style="width: 20px;">
                  <input type="checkbox" class="chkT" style="width: 15px; height: 15px;">
                </th>
                <th style="width: 140px;">
                  abcd
                </th>
              </tr>
              <tr class="panel-default" style="height: 30px;">
                <th style="width: 20px;">
                  <input type="checkbox" class="chkT" style="width: 15px; height: 15px;">
                </th>
                <th style="width: 140px;">
                  1234
                </th>
              </tr>
            </tbody>
          </table>
        </div>
        <!--/id -page content-->
      </div>
      <!--/id -page container-->
    </div>
    <!-- /container -->
  </div>
  <!-- /content -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>