Modify the checkbox's initial value prior to submission

Question

Modify the checkbox's initial value prior to submission

I'm having a small issue. I am generating a checkbox list where the checkboxes are checked if the JSON value inside them is true and unchecked if the JSON value is false. So, if the checkbox is checked, the corresponding line of HTML looks like this:

<input id="to_be_shown_individually" type="checkbox" ${(this.to_be_shown_individually && 'checked')} value=> <br>

Now, I have provided the option for the user to check and uncheck the checkbox. However, when they uncheck the checkbox, its value always remains true. You can see in the first image that the checkboxes are checked, so I get true. But in the second attempt, even when I uncheck them, I still get true.

So, when I use

document.getElementById("to_be_shown_individually").value;

It always returns true, whether the user has unchecked the checkbox or not.

javascript jquery html css ajax

Answer 1

Answer №1

It's important to always remember that the checked property is what determines whether a checkbox is checked or not:

document.querySelector('button').addEventListener('click', function() {
  var checkbox = document.getElementById("specific_checkbox");
  console.log(checkbox.value, checkbox.checked);
})

<input id="specific_checkbox" type="checkbox" checked value="example" />
<button>Check state</button>

Answer 2

It's important to always remember that the checked property is what determines whether a checkbox is checked or not:

document.querySelector('button').addEventListener('click', function() {
  var checkbox = document.getElementById("specific_checkbox");
  console.log(checkbox.value, checkbox.checked);
})

<input id="specific_checkbox" type="checkbox" checked value="example" />
<button>Check state</button>

Answer 3

Answer №2

Try using

document.querySelector("#select_show_individually").value;

Instead of

document.querySelector("#select_show_individually").checked;

Using this will provide you with a boolean response depending on whether the checkbox is checked or not

Answer 4

Try using

document.querySelector("#select_show_individually").value;

Instead of

document.querySelector("#select_show_individually").checked;

Using this will provide you with a boolean response depending on whether the checkbox is checked or not

Answer 5

Answer №3

HTML

<input type="checkbox" id="check">

Javascript snippet

let isChecked = jsonData.value == true;
$("#check").prop("checked", isChecked);

Answer 6

HTML

<input type="checkbox" id="check">

Javascript snippet

let isChecked = jsonData.value == true;
$("#check").prop("checked", isChecked);

Modify the checkbox's initial value prior to submission

Answer №1

Answer №2

Answer №3

Similar questions

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

What is the best way to navigate through an HTML node tree, including all of its sub elements, when walking through

Barba.js Revolutionizes Page Reloading for Initial Links

Acquiring the root URL with the $location service in AngularJS

Why isn't this ajax script able to successfully transmit the data?

Using HTML or JavaScript to generate a multitude of identical HTML elements on a webpage

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

How can I target all ul elements except those contained within a div with a specific class using CSS?

What is the best way to implement an AJAX request using the PhantomJSDriver?

Is it possible for someone to enhance the code by minimizing the if-else statements through the implementation of

Looking to confirm client-side text in NodeJS?

Changing the background color of the legend text when hovering over a d3 doughnut chart

Center the font in the middle of the text field

How can we enhance our proxyURL in Kendo UI with request parameters?

Is it possible to execute a function within an HTML page simply by clicking on it?

Sending data from a child component to its parent counterpart

Avoiding cheating in a JavaScript game

Image overlay on a hovering background

Automatically updating the scope of the .filter() function

Interactive Table - Enhance Your Searching Experience with jQuery