Receiving Radio Box Nodelist and checking if this checked to apply logic

Asked

Viewed 13 times

0

I have the following pure Javascript code (I don’t want to use jQuery here):

const petSize = document.querySelectorAll('.sizeRadio')

const isChecked = (checkableElement => checkableElement.checked ? true : false )

const fixUnselectedRadio = (radioToCheck, radioToUncheck) =>{
    radioToCheck.addEventListener('click', ()=>{
        radioToUncheck.checked = false
    })   
}

let tamArray = petSize.forEach((tamanho, index, petSize)=>{
    if(isChecked(tamanho)){
        fixUnselectedRadio(tamanho, !tamanho )
    }
})
<div class="tamanho mt-1 mb-2">
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="gigante" name="gigante" value="gigante" /> </input> 
      <label class="form-check-label" for="gigante">Gigante (Acima de 70cm - 45 a 60Kg)</label>
  </div>         
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="grande" name="grande" value="grande" /> </input> 
      <label class="form-check-label" for="gigante">Grande (De 50 a 69cm - 25 a 45Kg)</label>
  </div>
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="medio" name="medio" value="medio" /> </input> 
      <label class="form-check-label" for="gigante">Médio (De 36cm a 49cm - 15 a 25kg)</label>
  </div>
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="medio" name="medio" value="pequeno" /> </input> 
      <label class="form-check-label" for="gigante">Pequeno (De 28cm a 35cm - 6 a 15kg)</label>
  </div>
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="mini" name="mini" value="mini" /> </input> 
      <label class="form-check-label" for="gigante">Mini (Abaixo de 28cm - até 6kg)</label>
  </div>
</div>

When executing and attempting to select radios, will realize what happens: everyone is active with the exception of the third and fourth radios). I need only one to stay active at a time but I couldn’t solve it that way and I couldn’t find any online solution!

javascript
  • 1

    How you implemented the function isChecked? Put the implementation into the body of snippet of the code so that we can execute it.

  • ah sorry, I didn’t realize I forgot

  • All right, I updated

  • 1

    Don’t need JS to do this, just give the same name for the input of the kind radio, thus creating a group. In each group, automatically only one input can be active at a time.

  • Man, I didn’t think of it :what simple!

1 answer

1


The simplest way to do this is to share the same attribute name of all the radios and use the event change to determine when another field is selected. Use name for this is even the most recommended way to achieve this result.

Thus:

document.querySelectorAll('[name="size"]')
  .forEach((field) => field.addEventListener('change', (event) => {
    console.log(event.target.value)
  }))
<input type="radio" name="size" value="small" /> Pequeno
<input type="radio" name="size" value="normal" /> Normal
<input type="radio" name="size" value="large" /> Grande

Note above that to differentiate the three fields, I use the attribute value. That way I’ll be able to get a specific value for each of them.

  • This is exactly what I need, simpler than I imagined :o Thank you very much!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.