So, i am trying to create a tick box that have thic action:
- The chkAll box , once been ticked, all other check boxes will also ticked.
- 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 >
<div >
<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 role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
<input type="number" 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 >
<button id="btnPrintCNTicked{$rows.id}" type="button" style="width: 40px;"
onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
</span>
</td>
</tr>
</table>
<div style="margin-top: 10px;">
<table style="font-size: 8pt;">
<thead>
<tr 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 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 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 -->CodePudding user response：
Two things you should be aware of:
#idshould be used sparingly (preferably not at all), I have changed all#idto classes (with the exception of the ugly button and input). The frequent use of#idwill 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 >
<div >
<div >
<div >
<h3>Manage Deliveries</h3>
</div>
<div >
<table align="center">
<tr >
<td role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
<input type="number" id="form-control input-xs" 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 >
<button id="btnPrintCNTicked{$rows.id}" type="button" style="width: 40px;"
onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
</span>
</td>
</tr>
</table>
<div style="margin-top: 10px;">
<table style="font-size: 8pt;">
<thead>
<tr style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" 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 style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" style="width: 15px; height: 15px;">
</th>
<th style="width: 140px;">
abcd
</th>
</tr>
<tr style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" 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>CodePudding user response：
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 >
<div >
<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 role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
<input type="number" 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 >
<button id="btnPrintCNTicked{$rows.id}" type="button" style="width: 40px;"
onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
</span>
</td>
</tr>
</table>
<div style="margin-top: 10px;">
<table style="font-size: 8pt;">
<thead>
<tr 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 style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" id="chkT" style="width: 15px; height: 15px;" />
</th>
<th style="width: 140px;">
abcd
</th>
</tr>
<tr style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" id="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 -->CodePudding user response：
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" >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>CodePudding user response：
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();
}
})
html in case you did not remove the onchange.
<div >
<div >
<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 role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
<input type="number" 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 >
<button id="btnPrintCNTicked{$rows.id}" type="button" style="width: 40px;"
onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
</span>
</td>
</tr>
</table>
<div style="margin-top: 10px;">
<table style="font-size: 8pt;">
<thead>
<tr style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" id="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 style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" id="chkT" style="width: 15px; height: 15px;" />
</th>
<th style="width: 140px;">
abcd
</th>
</tr>
<tr style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" id="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 -->
CodePudding user response：
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 thisBox = event.target;
const condPart = document.querySelector(`#conditional-part`);
if (thisBox.id === `chkAll`) {
document.querySelectorAll(`input[type=checkbox]`).forEach(n => n.checked = thisBox.checked)
thisBox.checked ? condPart.classList.add(`show`) : condPart.classList.remove(`show`);
} else {
const chkTAll = document.querySelectorAll(`.chkT:checked`);
chkTAll.length > 1 ? condPart.classList.add(`show`) : condPart.classList.remove(`show`);
}
}
document.querySelectorAll(`input[type=checkbox]`)
.forEach(node => node.addEventListener(`change`, 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 >
<div >
<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 role="group" aria-label="..." style="width: 85px; margin-top: 2px;">
<input type="number" 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 >
<button id="btnPrintCNTicked{$rows.id}" type="button" style="width: 40px;"
onclick="javascript:btnPrintCNTicked_Click({$rows.id},$('#cpyCN{$rows.id}').val())">CN</button>
</span>
</td>
</tr>
</table>
<div style="margin-top: 10px;">
<table style="font-size: 8pt;">
<thead>
<tr style="height: 30px;">
<th style="width: 20px;">
<input type="checkbox" id="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 style="height: 30px;">
<td style="width: 20px;">
<input type="checkbox" style="width: 15px; height: 15px;" />
</td>
<td style="width: 140px;">
abcd
</td>
<td/>
</tr>
<tr style="height: 30px;">
<td style="width: 20px;">
<input type="checkbox" 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 -->