如何检查是不是检查了不同选项卡中的每个复选框?

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.logs 发现的那样,第一个用户的复选框正在执行所有复选框的代码,而其余的复选框没有做任何事情。所以我不能进入下一个屏幕,除非我选中所有用户中的复选框,最后一个是第一个。如果我取消选中第二个用户上的复选框,也会发生同样的情况,它什么也不做,因为它的代码没有执行。

我有一个关于更改的 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 代码对每个人都是一样的。此外,如果屏幕上的复选框不止这些复选框,会发生什么情况,例如,一种不需要检查的复选框,因为它会执行其他类型的操作?因此,这是强制性的,但也是仅用于其他目的的。谢谢!

以上是关于如何检查是不是检查了不同选项卡中的每个复选框?的主要内容,如果未能解决你的问题,请参考以下文章

如何检查一个值是不是在数组中并使用复选框进行检查

检查是不是使用 jQuery 检查了复选框

如何检查表格中的所有复选框并使用JS为每个复选框做一项工作

如何检查水豚中的复选框?

如何检查是不是选中了复选框[重复]

如何检查单击时是不是选中了复选框?