如何检查是不是检查了不同选项卡中的每个复选框?
Posted
技术标签:
【中文标题】如何检查是不是检查了不同选项卡中的每个复选框?【英文标题】:How to check if every checkbox in different tabs are checked?如何检查是否检查了不同选项卡中的每个复选框? 【发布时间】:2021-08-24 17:51:29 【问题描述】:我正在开发一个以 Java 作为后端技术、JSP 和 JS 在前端使用 jQuery 的项目。我是 JS 和 jQuery 的新手,或者至少我不是专业人士,所以我在这里尽力做到最好。
所以问题是:我正在处理这个屏幕,它显示两个或更多用户以及一些与他们相关的信息。每个用户(及其信息)位于不同的选项卡上。每个用户/选项卡都有一个复选框,必须选中才能进入下一个屏幕。因此,如果我们有两个用户,则必须选中两个复选框。如果我们有五个,全部五个。屏幕是这样的(记住粉红色的是选中的用户):
所以问题是,有时我的逻辑运行良好,我可以在选中所有复选框后进入下一个屏幕。但是在刷新页面后的其他时候,正如我使用一些console.log
s 发现的那样,第一个用户的复选框正在执行所有复选框的代码,而其余的复选框没有做任何事情。所以我不能进入下一个屏幕,除非我选中所有用户中的复选框,最后一个是第一个。如果我取消选中第二个用户上的复选框,也会发生同样的情况,它什么也不做,因为它的代码没有执行。
我有一个关于更改的 JS 函数,它检查是否所有复选框都被选中,以便将箭头显示到下一个屏幕。像这样:
$("#demPricesCheckbox").change(function ()
var checkboxes = document.querySelectorAll("[id='demPricesCheckbox']");
var show = true;
for (var i = 0; i < checkboxes.length && show; i++)
if (!checkboxes[i].checked) show = false;
if (show)
ContractPrices.showForwardButton();
else
ContractPrices.hideForwardButton();
);
我的复选框 html 内容如下:
<label class="sub-checkbox" style="margin-left: 100px; margin-top: 5px">
<input
type="checkbox"
id="demPricesCheckbox"
name="demPricesCheckbox"
value="1"
/>
<branches:message code="NAME_OF_CHECKBOX" />
</label>
有什么提示吗?我将不胜感激任何关于为什么会发生这种情况的想法或解释。如果您需要更多信息,请询问我。
感谢您的宝贵时间!请原谅我的英语不好!
【问题讨论】:
【参考方案1】:您的逻辑很接近,但有几点需要牢记。
HTML 元素应具有唯一id
属性,这意味着您在任何页面上都不应有超过 1 个具有相同 id
的元素。
您应该在每次交互时检查用户界面的“状态”——这是反应式编程的基础,也是 jQuery/React/Vue 让事情变得简单的基础。
我已经编写并注释了一些有助于澄清的代码。
// You have jQuery installed, so let's use that instead of vanilla
// This is a CSS selector for "all checkboxes in the DOM".
$("input[type='checkbox']").change(() =>
// Count how many checkboxes you have on the page
// You can use a different method
const totalNumberOfCheckboxes = $("input[type='checkbox']").length;
let countChecked = 0;
// Now, let's loop through them all and see if they are all checked
$("input[type='checkbox']").each((index, element) =>
// Increase the counter only if the checkbox is checked
if (element.checked)
countChecked += 1;
);
// Now, let's check if they are all checked!
if (totalNumberOfCheckboxes === countChecked)
// Enable your button
console.log("Enabling the next button");
$(".btn.next").removeAttr("disabled");
else
// Disable the button
console.log("Disabling the next button because all the checkboxes are not checked.");
$(".btn.next").attr("disabled", "disabled");
);
// Next button click listener
// This will only trigger when clicked, and the button is "enabled" – i.e.: not "disabled"
$(".btn.next").click(() =>
console.log('Go to the next page :)')
// This is just for the example – it disables all the checkboxes again
$("input[type='checkbox']").each((index, element) =>
element.checked = false;
);
);
// Setup
// This is not waiting for events, so it will run
// when the page is loaded
console.log("Disabling the next button because the page has just been loaded");
$(".btn.next").attr("disabled", "disabled");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input id="user1" type="checkbox" />
<label for="user1">User 1</label>
</div>
<div>
<input id="user2" type="checkbox" />
<label for="user2">User 2</label>
</div>
<div>
<input id="user3" type="checkbox" />
<label for="user3">User 3</label>
</div>
<button class="btn next">Next</button>
【讨论】:
您好,谢谢您的回答,很有用。我没有得到以下内容:如果我事先不知道屏幕上有多少用户,我如何为复选框“生成”唯一 ID?我的意思是,它们来自数据库,所以可能有一个或十个,并且带有复选框的 JSP 代码对每个人都是一样的。此外,如果屏幕上的复选框不止这些复选框,会发生什么情况,例如,一种不需要检查的复选框,因为它会执行其他类型的操作?因此,这是强制性的,但也是仅用于其他目的的。谢谢!以上是关于如何检查是不是检查了不同选项卡中的每个复选框?的主要内容,如果未能解决你的问题,请参考以下文章