无法获取复选框的"选中"属性

Question

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

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

我试图让它尽可能简单 - 请参阅下面的代码片段，这是一个有效的代码笔。

你会看到有两个复选框 - 一个用于"有影响力的"，一个用于"转发"。默认情况下，转发复选框处于选中状态。有一个按钮可以运行一个函数，该函数检查是否选中了 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属性更改。