创建一个复选框，然后一键自动勾选所有其他复选框，并显示一个按钮

Question

所以，我正在尝试创建一个具有 thic 动作的复选框：

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

然后，我试图实现的另一个动作是，如果两个或多个复选框（不包括 chkAll 框被勾选，同样的按钮也会出现。这个按钮就像一个 zip 文件按钮，所以，只有当多个复选框被打勾，就会出现（可以使用）。

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

2.当我取消单击 chkAll 复选框时，该按钮确实消失了，但其他 chckboxes 仍然被选中，他们认为它们也没有被选中。

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>

Answer 2

 function toggleTick_Change(e) { if(e.checked){ $('.chkBox').prop('checked',true); $("#conditional-part").show(); }else{ $('.chkBox').prop('checked',false); $("#conditional-part").hide(); } } $('.chkBox').click(function() { if ($('.chkBox:checked').length == $('.chkBox').length) { $('#chkAll').prop('checked', true); $("#conditional-part").show(); } else { $('#chkAll').prop('checked', false); $("#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(this)" /> </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" class="chkBox" 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" id="chkT" class="chkBox" 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 -->

Answer 3

所以这主要是由于您触发了两次更改。 当用户选择它时排队一次，然后当您运行您的 on change function 时再次排队。

只需将.js-checkbox的 class 添加到您的复选框并删除 onchange。

$('.js-checkbox').change(function() {
  if ($(this).attr('id') === 'chkAll') {
    if ($(this).prop('checked') === true) {
      $('.js-checkbox').prop('checked', true);
    } else {
      $('.js-checkbox').prop('checked', false);
    }
  }
  
  const checked = $('.js-checkbox:checked');
  
  if (checked.length >= 2) {
    $('#conditional-part').show();
  } else {
    $('#conditional-part').hide();
  }
})

Answer 4

JS方式...

 const myForm = document.querySelector('#my-form'), chkbxN = document.querySelectorAll('#my-form input[type="checkbox"]'); myForm.onsubmit = e => e.preventDefault() // disable form submit myForm.oninput = e => { if (e.target.name==='All' && myForm.All.checked) chkbxN.forEach(cb => cb.checked = true) let chkCount = [...chkbxN].reduce((sum,cb)=>sum+(cb.checked?1:0),0) myForm.theButton.classList.toggle('noDisplay',(chkCount < 2)) }

 label { display: block; }.noDisplay { display: none; } #my-form > p { height: 2.2em; background: #a9bccf; padding: .3em; }

 <form id="my-form"> <p> <button name="theButton" type="button" class="noDisplay">button</button> </p> <label> <input type="checkbox" name="All" >All </label> <label> <input type="checkbox" name="car" >Car </label> <label> <input type="checkbox" name="house">House </label> <label> <input type="checkbox" name="nice" >nice </label> <label> <input type="checkbox" name="beach">Beach </label> </form>

Answer 5

我不得不承认，我的 jQuery 已经很生锈了。 所以，我用香草 JS 做到了这一点。

如前所述，有两个具有相同 id 的复选框。 对于任何使用 id 的元素，id 属性都必须是唯一的。 所以我将chkT更改为 class。

我还从display: none;更改了 CSS 属性。 to visibility: hidden以便表格在显示/隐藏时不会跳动太多。 我添加了一个名为 .show 的.show和属性visibility: visible!important ，然后在满足不同条件时添加/删除 class 。

我还从复选框中删除了onchange属性，并在 javascript 中添加了事件侦听器。

希望这会有所帮助，并且不会让您进一步困惑。 JQuery 是一个橡木工具，但是，我真的建议您尝试并学习更多普通的 Javascript 方法来构建良好的 JS 基础。

 function toggleTick_Change(event) { const chkAll = document.querySelector(`#chkAll`); const chkT = document.querySelectorAll(`.chkT`); const condPart = document.querySelector(`#conditional-part`); if (event.target.id === `chkAll`) chkT.forEach(n => n.checked = event.target.checked); const ckTCheckedCount = document.querySelectorAll(`.chkT:checked`).length if (ckTCheckedCount === 0) { chkAll.checked = false; chkAll.indeterminate = false; } else if (chkT.length === ckTCheckedCount) { chkAll.checked = true; chkAll.indeterminate = false; } else { chkAll.checked = false; chkAll.indeterminate = true; } ckTCheckedCount > 1? condPart.classList.add(`show`): condPart.classList.remove(`show`); } document.querySelectorAll(`input[type=checkbox]`).forEach(node => node.addEventListener(`click`, event => toggleTick_Change(event)));

 #conditional-part { visibility: hidden; }.show { visibility: visible;important; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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;" title="Select All" /> </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;"> <td style="width: 20px;"> <input type="checkbox" class="chkT" style="width: 15px; height: 15px;" /> </td> <td style="width: 140px;"> abcd </td> <td/> </tr> <tr class="panel-default" style="height: 30px;"> <td style="width: 20px;"> <input type="checkbox" class="chkT" style="width: 15px; height: 15px;" /> </td> <td style="width: 140px;"> 1234 </td> <td/> </tr> </tbody> </table> </div> <!--/id -page content--> </div> <!--/id -page container--> </div> <!-- /container --> </div> <!-- /content -->