Mark as true if one of the two radio buttons are checked

Question

This is probably an easy thing to accomplish, but I still haven't figured it out yet. I have two radio buttons and I want to set state to true if either are checked.

for (let i = 0; i < inputs.length; i += 1) {
    if (
        inputs[i].name === 'person' &&
        ((inputs[i].value === 'Employee' && inputs[i].checked === true) ||
        (inputs[i].value === 'Dependent' && inputs[i].checked === true))
       ) {
        inputs[i].style.border = '';
        this.setState({ personFilled: true });
    } else if (
        inputs[i].name === 'person' &&
        ((inputs[i].value === 'Employee' && inputs[i].checked === false) ||
        (inputs[i].value === 'Dependent' && inputs[i].checked === false))) {
        inputs[i].style.border = '2px solid red';
    }
 }

As of now, it's always false based on my conditional.

Radio Button Code

<label>Person</label>
<input
    type='radio'
    className='form-radio'
    name='person'
    id='person'
    value='Employee'
    onChange={gatherFormData}
/>
<span className='label'>Employee</span>
<input
    type='radio'
    className='form-radio'
    name='person'
    value='Dependent'
    onChange={gatherFormData}
/>
<span className='label'>Dependent</span>

Answer 1

You forgot to set state to false. The code can be simplified to:

for (let i = 0; i < inputs.length; i += 1) {
  if (inputs[i].name === 'person') {
    const checked = ((inputs[i].value === 'Employee' && inputs[i].checked) || (inputs[i].value === 'Dependent' && inputs[i].checked));
    inputs[i].style.border = checked ? '' : '2px solid red';
    this.setState({ personFilled: checked });
  }
}

Note that you are setting state inside a loop, thus overriding it's value on every iteration. You could store person filled as an array or have different items according the index. If your inputs exists only one time in the UI, you should not use a for loop and refer to them by id, as noted in the comments.

Answer 2

Simply use Array.prototype.some() :

if ([...inputs].some(x=>x.checked)) { this.setState({ personFilled: true }) };

assuming inputs is a NodeList containing only the relevant radio buttons.

Answer 3

I modified your code a bit and added some HTML, and it works for me like this:

 function handler() { this.setState = function(state) { console.log(state); } inputs = document.querySelectorAll('input'); for (let i = 0; i < inputs.length; i += 1) { if (inputs[i].name === 'person' && ((inputs[i].value === 'Employee' && inputs[i].checked === true) || (inputs[i].value === 'Dependent' && inputs[i].checked === true)) ) { inputs[i].style.border = ''; this.setState({ personFilled: true }); } else if (inputs[i].name === 'person' && ((inputs[i].value === 'Employee' && inputs[i].checked === false) || (inputs[i].value === 'Dependent' && inputs[i].checked === false)) ) { inputs[i].style.border = '2px solid red'; } } } var element = document.querySelector('button') if (element.addEventListener) { element.addEventListener('click', handler, false); } else { element.attachEvent('onclick', handler); } 

 <input name="person" type="radio" value="Employee">Employee</input> <input name="person" type="radio" value="Dependent">Dependent</input> <button>Submit</button>