CODEWITHSUNDEEP
javascriptecmascript-6
Lucas Verhoest
Lucas Verhoest

Reputation: 275

How to set select attribute to radiobuttons in ES 6

I'm trying to make radiobuttons using a JSON-file in Javascript. I'm not really sure how I can set the checked attribute so only one radiobutton can be selected. 

const makeArtistRadioButtons = (artists) => {
    artists.forEach(artist => {
      // <div>
        // <input type="radio" value="artist"> artist name <br>
        // ...
      // </div>
      const $parent = document.querySelector(`.radiobuttons`);
      const $label = document.createElement(`label`);
      $label.innerHTML = `<input class="radio" type="radio" value="${artist}"> ${artist}`
      $parent.appendChild($label);
    });

  }
<form class="" action="index.html" method="post">
   <section class="radiobuttons"></section>
   <button type="submit" name="button">Submit</button>
</form>

Upvotes: 0

Views: 38

Answers (2)

Shaun
Shaun

Reputation: 1

Set the name attribute on each radio button to the same value, then only 1 radio button with that name can be selected at a time

 <input type='radio' name='group'                
  value=1>
 <input type='radio' name='group' 
  value=2>            
 <input type='radio' name='group'                  
  value=3>

Upvotes: 0

castletheperson
castletheperson

Reputation: 33496

Give the input elements the same name attribute so that only one of them can be checked at a time.

<input class="radio" type="radio" name="artist" value="${artist}"> ${artist}

Upvotes: 2

Related Questions