Make checkbox value checked with jQuery or JavaScript

Question

I am experiencing trouble as I want to make checkbox value checked when site loads and the visitor can uncheck it. id field is dynamic inside input so I need to check based on name and value I suppose.

I used jQuery to make it checked, but nothing happens

jQuery(document).ready(function($) {    
  $("input.myclass[name='test-case'][value='yes']").prop("checked", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="test-case[]" id="cbopt-AAljenwo" value="yes">

Not sure if this is correct value of marking input as checked. User also can uncheck box if he doesn't like the option. Any help appreciated.

1) Look at the name in the HTML and the name you've set in the selector. 2) there's no class on that checkbox element 3) If you want this to work on load, just use checked="checked" in HTML — Rory McCrossan
– Rory McCrossan, Commented Apr 16, 2020 at 12:27
Use good old html and add checked attribute to the checkbox — Yanjan. Kaf.
– Yanjan. Kaf., Commented Apr 16, 2020 at 12:27
@Yishmeray id field is dynamic inside input so I need to check based on name and value — Rory McCrossan
– Rory McCrossan, Commented Apr 16, 2020 at 12:29
@RoryMcCrossan not able to insert code in HTML as this is generated through builder. But can add jquery code which will mark it as checked. Not sure how to do it — ron9
– ron9, Commented Apr 16, 2020 at 12:36

Rory McCrossan · Accepted Answer · 2020-04-16 12:39:53Z

3

The best way to achieve this would be to put a checked attribute in the HTML. However you state that the HTML is being generated for you, so you don't have that option.

The second best option would be to target the checkbox by its id, however that has the same issue for you as the id is dynamically generated at runtime.

Your last resort is to then select the element by its name and value, which is what your jQuery is trying to do, however there's a couple of issues. Firstly the checkbox you're targeting has no class and the name attribute has a [] suffix which you need to include. Try this:

jQuery($ => {
  $('input[name="test-case[]"][value="yes"]').prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="test-case[]" value="yes">

answered Apr 16, 2020 at 12:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2020-04-16 12:31:29Z

3

You can simply add checked attribute to the input element to make it checked when the page is loaded:

<input type="checkbox" checked="checked"/>

Thanks

edited Apr 16, 2020 at 12:31

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Apr 16, 2020 at 12:31

Anirudh Kanukanti

3181 silver badge3 bronze badges

1 Comment

3limin4t0r Over a year ago

<input type="checkbox" checked /> would be enough. There is no reason to assign a value to the attribute. "checked - Boolean; if present, the checkbox is toggled on by default" - MDN

Mister Jojo · Accepted Answer · 2020-04-16 12:40:46Z

0

simply that:

const theChexbox = document.querySelector("input[name='test-case[]']")

theChexbox.checked = true

<input type="checkbox" name="test-case[]" id="cbopt-AAljenwo" value="yes">

answered Apr 16, 2020 at 12:40

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

Make checkbox value checked with jQuery or JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related