创建一个复选框，然后一键自动勾选所有其他复选框，并显示一个按钮
Posted
技术标签:
【中文标题】创建一个复选框，然后一键自动勾选所有其他复选框，并显示一个按钮【英文标题】：Create one tick box then automatically ticked all other tick boxes with one click and also shows a button 【发布时间】：2022-01-18 07:39:04 【问题描述】：所以，我正在尝试创建一个具有此操作的复选框：
-
chkAll 复选框，一旦被勾选，所有其他复选框也会被勾选。
发生此操作时，将出现一个按钮。
然后，我试图实现的另一个动作是，如果两个或多个复选框（不包括 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 -->【问题讨论】：
【参考方案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>【讨论】：
谢谢你告诉我。现在，我不能将 id 更改为 class，因为我的代码中的 id=chkT 实际上是这个 -> id="chkT$rows.orderNo"，所以，还有其他函数会使用这个 id检查数据。【参考方案2】：所以这主要是由于您触发了两次更改。当用户选择它时排队一次，然后在您运行 on change 函数时再次排队。
只需在您的复选框中添加一个 .js-checkbox 类并删除 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，以防您没有删除 onchange。
<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;" class="js-checkbox" />
</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;" class="js-checkbox" />
</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;" class="js-checkbox" />
</th>
<th style="width: 140px;">
1234
</th>
</tr>
</tbody>
</table>
</div>
<!--/id -page content-->
</div>
<!--/id -page container-->
</div>
<!-- /container -->
</div>
<!-- /content -->
【讨论】：
嗨，它可以工作，但我仍然需要第一次双击它，然后按钮才会出现。 您确定从复选框中删除了 onchange 吗？用 html 更新。 我已经修复了它，但现在什么也没有发生。单击复选框时，没有任何反应。我在 $('.js-checkbox').change(function() .. 和使用 function toggleTick_Change() 之间有任何区别 我在 $('.js-checkbox').change(function() 之前添加了 $(document).ready(function() ，现在可以正常使用了。【参考方案3】： 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 -->【讨论】：
嗨，谢谢，我试过你的，但在我的笔记本电脑上并没有真正工作。当我单击 chkAll 复选框时，什么也没有发生。是否检查了 const = $('.js-checkbox:checked');在 toggleTick_Change 函数之外？不知道为什么在你的 sn-p 中它可以工作，但在我的笔记本电脑上却没有。 复制所有 html 代码，因为我在复选框中添加了类名【参考方案4】：我不得不承认，我的 jQuery 相当生疏。所以，我用香草 JS 做到了这一点。
如前所述，有两个具有相同 id 的复选框。对于任何使用 id 的元素，id 属性都必须是唯一的。所以我把chkT改成了一个类。
我还将 CSS 属性从 display: none; 更改为 visibility: hidden，以便表格在显示/隐藏时不会跳动太多。我添加了一个名为 .show 的类和属性 visibility: visible!important，然后在满足不同条件时添加/删除该类。
我还从复选框中删除了 onchange 属性，并在 javascript 中添加了事件侦听器。
希望这对您有所帮助，并且不会让您更加困惑。 JQuery 是一个橡木工具，但是，我真的建议您尝试并学习更多的 vanilla 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 -->【讨论】：
【参考方案5】：JS 方式...
const
myForm = document.querySelector('#my-form')
, chkbxN = myForm.querySelectorAll('input[type="checkbox"]:not([name="All"])')
;
myForm.onsubmit = e => e.preventDefault() // disable form submit
myForm.oninput = (target) =>
if (target.name==='All')
chkbxN.forEach(cb => cb.checked = myForm.All.checked)
let CheckedBoxes = [...chkbxN].reduce((arr,cb)=>
if (cb.checked) arr.push(cb.name)
return arr
,[])
myForm.All.checked = ( CheckedBoxes.length === chkbxN.length )
//myForm.All.indeterminate = ( 0 < CheckedBoxes.length && CheckedBoxes.length < chkbxN.length )
myForm.theButton.classList.toggle('noDisplay',(CheckedBoxes.length < 2))
console.clear()
console.log( JSON.stringify(CheckedBoxes))
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>【讨论】：
全部按钮，一旦被取消点击，其余的复选框仍然打勾。 @BsozizGiiig 是的，这是 PO 唯一要求的。这是这些东西的通常和预期的行为。取消选中此按钮不应影响其他按钮。 好的，谢谢，但我希望所有按钮一旦取消选中，其余的也取消选中。 @BsozizGiiig 我更新了我对原始问题的这个潜意识请求的代码。好吗？以上是关于创建一个复选框，然后一键自动勾选所有其他复选框，并显示一个按钮的主要内容，如果未能解决你的问题，请参考以下文章
PHPWord如何解决PHPWord的输出checkbox复选框并设置checked已勾选