Unable to get 'checked' property of checkbox

I am working on a web-application using Vite, JavaScript, jQuery, and Bootstrap. I need to check if a checkbox is checked using JS or jQuery. I have been using the jQuery .is(':checked') function all over the app, and it’s working perfectly, but for some reason on one particular page, the function always returns "false" even when the boxes are checked. I cannot figure out why.

I’ve read through all the similar questions on here and tried several approaches using Vanilla JS and jQuery, nothing works, I’m hoping someone here will see what the problem is.

I’ve tried to make it as easy as possible — see below for code snippets, and here is a working codepen.

You will see there are two checkboxes — one for "influentials" and one for "retweets". The retweets checkbox is checked by default. There is a button to run a function that checks if the boxes are checked or not using the jQuery .is(':checked') function and then console.logs the result.

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>

>Solution :

The ids that you are using to target the checkboxes are the same as those of the wrapping <div> elements. id attributes must be unique. Try altering the wrapping <div> elements to use a different id from that of the checkbox.

Possible Edit:

Change this:

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

to this:

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

paying particular attention to the id attribute change at the div.checkbox level.