Getting value of a checked box , react

Hello everyone, I am having an issue and I’m not sure why it’s returning undefined.
So the code is like this.

<input type="checkbox" className="checkbox" value="Coaching" />1 : 1 Coaching

And onsubmit of the form I would like to get the value of what boxes were checked.

render() {
    const { status } = this.state;
    function itworked() {
  alert("Sky will contact you shortly!")
  var checkedValue = document.getElementsByClassName('.checkbox').value


But for some reason this method is giving me undefined when it is submitted.
Can anyone catch where I went wrong?
Thank you.

Hello there,

Using getElementsByClassName, you do not need to provide the selector (.), as you can only search by class.

Hope this helps

1 Like

Wow, that was a pretty dumb mistake I made, but it is still returning undefined when the form is submitted.
Does anyone see any other mistakes?


It might be helpful to see more of your code, as this is not valid JSX:

<input type="checkbox" className="checkbox" value="Coaching" />1 : 1 Coaching

Sure, here is the full code.

The contact page (where this issue is) is under components => Contact

Remember, you are looking for multiple elements with the className "checkbox"…so, even if one is found, you will get an array…

Hope this helps

Just something to add: Take advantage of React, and combine all of your checkboxes into one component:

<div className="radio ">
    <input type="checkbox" className="checkbox" value="Coaching" />1 : 1 Coaching
1 Like

An array would be fine, so long as it is an array of the values of the boxes.
If you know of another method to get these values, in any form. I would be very appreciative.
Thats a good idea with making them into a component.

I am hinting at the fact that you are trying to get the value of an array…this does not work.

1 Like

You’re right, that is probably the issue.
Thanks for your help. I am going to work at this and figure out the solution.