无法获得复选框的“已选中”属性

Question

我正在使用 Vite、JavaScript、jQuery 和 Bootstrap 开发一个 Web 应用程序。 我需要检查是否使用 JS 或 jQuery 检查了复选框。 我一直在整个应用程序中使用 jQuery .is(':checked')函数，它运行良好，但由于某种原因，在一个特定页面上，即使选中了这些框，该函数也总是返回“false”。 我不知道为什么。

我已经阅读了这里所有类似的问题，并尝试了几种使用 Vanilla JS 和 jQuery 的方法，但没有任何效果，我希望这里有人能看到问题所在。

我试图让它尽可能简单——见下面的代码片段，这里是一个工作的codepen 。

您将看到有两个复选框——一个用于“影响者”，一个用于“转发”。 默认情况下，转推复选框处于选中状态。 有一个按钮可以运行一个函数，该函数使用 jQuery .is(':checked')函数检查框是否被选中，然后 console.logs 结果。

JAVASCRIPT + HTML：

 const check = () => { let influentials = $("#influentials-checkbox").is(":checked"); let retweets = $("#retweets-checkbox").is(":checked"); console.log(influentials, retweets); }; // Attach check function to button $("#check-btn").on("click", () => { check(); });

 <!-- Bootstrap CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> <!-- CSS jQuery --> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" /> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <!-- Bootstrap JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script> <!-- CHECKBOXES --> <!-- Influentials Checkbox --> <div id="influentials-checkbox" class="checkbox"> <span for="influentials-checkbox" id="influentials-checkbox-label" class="checkbox-label">Only use posts from Influential People/Brands</span> <input type="checkbox" name="influentials-checkbox" id="influentials-checkbox" class="form-check-input" /> </div> <!-- Retweets Checkbox --> <div id="retweets-checkbox" class="checkbox"> <span for="retweets-checkbox" id="retweets-checkbox-label" class="checkbox-label">Include retweets in the results</span> <input type="checkbox" name="retweets-checkbox" id="retweets-checkbox" class="form-check-input" checked /> </div> <button id="check-btn">Check</button>

Answer 1

您用于定位复选框的id与包装<div>元素的相同。 id属性必须是唯一的。 尝试更改包装<div>元素以使用与复选框不同的id 。

可能的编辑：

改变这个：

<!-- CHECKBOXES -->

<!-- Influentials Checkbox -->
<div id="influentials-checkbox" class="checkbox">
  <span for="influentials-checkbox" id="influentials-checkbox-label" class="checkbox-label">Only use posts from Influential People/Brands</span>
  <input type="checkbox" name="influentials-checkbox" id="influentials-checkbox" class="form-check-input" />
</div>

<!-- Retweets Checkbox -->
<div id="retweets-checkbox" class="checkbox">
  <span for="retweets-checkbox" id="retweets-checkbox-label" class="checkbox-label">Include retweets in the results</span>
  <input type="checkbox" name="retweets-checkbox" id="retweets-checkbox" class="form-check-input" checked />
</div>

对此：

<!-- CHECKBOXES -->

<!-- Influentials Checkbox -->
<div id="influentials-checkbox-wrapper" class="checkbox">
  <span for="influentials-checkbox" id="influentials-checkbox-label" class="checkbox-label">Only use posts from Influential People/Brands</span>
  <input type="checkbox" name="influentials-checkbox" id="influentials-checkbox" class="form-check-input" />
</div>

<!-- Retweets Checkbox -->
<div id="retweets-checkbox-wrapper" class="checkbox">
  <span for="retweets-checkbox" id="retweets-checkbox-label" class="checkbox-label">Include retweets in the results</span>
  <input type="checkbox" name="retweets-checkbox" id="retweets-checkbox" class="form-check-input" checked />
</div>

特别注意div.checkbox级别的id属性更改。