Create one tick box then automatically ticked all other tick boxes with one click and also shows a button

Question

So, i am trying to create a tick box that have thic action:

1. The chkAll box, once been ticked, all other check boxes will also ticked.
2. When this action happens, a button will appear.

Then, another action I am trying to achieve is, if two or more checkboxes (not included the chkAll box is ticked, the same button will appear too. This button is like a zip file button, so, only if more than one check box is ticked, it will appear (enabled to be used).

Currently the error I am facing is, 1.the chkAll check box needs to double click only then, the button appear.

2.And when I unclicked the chkAll check box, the button does disappear, but the other chckboxes are still tciked, which they suppose to be unticked too.

3.And when more than 1 check boxes are ticked, the button does not appear.

I am new to php, jquery, so will really appreciate any guidance from you. Thank you.

 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

Two things you should be aware of:

• #id should be used sparingly (preferably not at all), I have changed all #id to classes (with the exception of the ugly button and input). The frequent use of #id will hinder if not cripple your code in the future. This is especially true if you use jQuery.

• onEvent attribute handlers are discouraged as well especially if you use 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

So this is mostly due to you triggering the change twice. once in line when a user selects it, Then again when you run your on change function.

Just add a class of .js-checkbox to your checkbox's and remove the 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

the JS way...

 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

I'll have to admit, my jQuery is pretty rusty. So, I did this with vanilla JS.

As was mentioned before, there are two checkboxes with the same id. The id attribute needs to be unique for any element that uses one. So I changed chkT to a class.

I also changed the CSS property from display: none; to visibility: hidden so that the table doesn't jump around so much when it is shown/hidden. I added a class called .show and the property visibility: visible!important and then just add/remove that class as the different conditions are met.

I also removed the onchange attribute from the checkboxes and added the event listeners in the javascript.

Hopefully, this helps and didn't confuse you further. JQuery is an oaky tool, however, I would really recommend that you try and learn more of the vanilla Javascript methods to build a good JS foundation.

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