創建一個復選框，然后一鍵自動勾選所有其他復選框，並顯示一個按鈕

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