read checkboxes status with javascript

Question

I have a list with several checkboxes dynamically generated by php inside a div, so they do not have an id or a name.

I can read the full div content with

var list = document.getElementById("myList").innerHTML;

the variable list looks similar to this:

<li><input type="checkbox">text 1</li>
<li><input type="checkbox">text 2</li>
<li><input type="checkbox">text 3</li>
<li><input type="checkbox">text 4</li>
.... (unknown number of entries)

What I need to do is to check if the checkbox has been checked or not prior to sending the data to a php file.

I would like to have something similar to this

<li>(checked) text 1</li>
<li>(not checked) text 2</li>
<li>(checked) text 3</li>
<li>(checked) text 4</li>

How can I do this ?

Are you just looking for the :checked CSS pseudo-class selector? — Cat
– Cat, Commented Aug 13, 2023 at 6:25
actually no. When a button on the page is pressed, I need to read the status of each checkbox and send it to a php file to be analyzed. — Mr.Yelloish
– Mr.Yelloish, Commented Aug 13, 2023 at 6:30

Cat · Accepted Answer · 2023-08-13 07:11:42Z

1

You can just verify the checked property of the checkbox. You don't have to access the innerHTML, you can run through the child elements of the list, like so:

const list = document.getElementById("myList")
const checkboxes = list.getElementsByTagName("input");
const button = document.getElementById("show");

// Calls showText when button is clicked
button.addEventListener("click", showText);

function showText(){
  let output = "";
  for (const checkbox of checkboxes) {
    // is it checked?
    const checked = checkbox.checked;

    // get just the text of the <li>-element
    const html = checkbox.parentElement.innerText;

    // build the string together
      output += "<li>(" + ((checked) ? "checked":"not checked") + ") " + html + "</li>\n";
  }
  // replace the content of the parent <ul>
  list.innerHTML = output;
}

<ol id="myList">
<li><input type="checkbox" name="cb1">1</li>
<li><input type="checkbox" name="cb2">2</li>
</ol>
<button id="show">READY</button>

edited Aug 13, 2023 at 7:11

Cat

4,2502 gold badges13 silver badges18 bronze badges

answered Aug 13, 2023 at 6:33

dequid

4513 silver badges8 bronze badges

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

4 Comments

Mr.Yelloish Over a year ago

Thanks for the answer. If I correctly understand your code, it loops through all the input elements inside the list variable and show the result in the console. How can I replace <input type="checkbox"> with checked / not checked as in my question ?

dequid Over a year ago

Just edited the code.

Cat Over a year ago

@dequid I stuck your code into a snippet so we can see it run. Also added a button with an event listener so the checkboxes are visible when the page first loads (until we click the button). Feel free to revert my changes if you don't like them.

Mr.Yelloish Over a year ago

solution works perfectly! please mark this question as completed

Collectives™ on Stack Overflow

read checkboxes status with javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related