代码之家 › 专栏 › 技术社区 › Mickey Vershbow

无法获取复选框的“checked”属性

bootstrap-5 checkbox jquery html javascript

Mickey Vershbow · 技术社区 · 2 年前

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

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

我试着让它尽可能简单——请参阅下面的代码片段,下面是一个工作示例 codepen .

你会看到有两个复选框——一个用于“影响力”和一个用于“转发”。默认情况下选中“转发”复选框。有一个按钮可以运行一个函数,该函数检查是否使用jQuery选中了框 .是(“:选中”) 功能,然后控制台。记录结果。

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>

1 回复 | 直到 2 年前

War10ck 2 年前

这个 id 用于定位复选框的与包装的相同 <div> 元素。 身份证件 属性必须要独一无二。尝试更改包装 <div> 元素使用不同的 身份证件 从复选框中删除。

可能的编辑:

更改此项:

<!-- 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 数量