<form>
  <fieldset>
    <legend>Record Label</legend>
    <p><input name="recordlabel" type="radio" value="Trojan" id="company1">
    <label for="company1">Trojan</label></p>
    <p><input name="recordlabel" type="radio" value="Epitaph" id="company2">
    <label for="company2">Epitaph</label></p>
    <p><input name="recordlabel" type="radio" value="Hellcat" id="company3">
    <label for="company3">Hellcat</label></p>
    <p><input name="recordlabel" type="radio" value="Fat Wreck Chords" id="company4">
    <label for="company4">Fat Wreck Chords</label></p>
    <p><input name="recordlabel" type="radio" value="Nuclear Blast" id="company5">
    <label for="company5">Nuclear Blast</label></p>
    <p><input name="recordlabel" type="radio" value="Relapse" id="company6">
    <label for="company6">Relapse</label></p>
    <p><input name="recordlabel" type="radio" value="Earache" id="company7">
    <label for="company7">Earache</label></p>
    <p><input name="recordlabel" type="radio" value="Peaceville" id="company8">
    <label for="company8">Peaceville</label></p>
    <p><input name="recordlabel" type="radio" value="Century Media" id="company9">
    <label for="company9">Century Media</label></p>
  </fieldset>
  <input type="submit" value="Send">
</form>
<div>
<button>Toggle checkbox/radio</button>
<output></output>
</div>
body {
  font-family: sans-serif;
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: flex-start;
}
output {
  border: 1px solid #ccc;
  background: #eee;
  display: block;
  margin: 1em 0;
  padding: .5em .2em;
}
let f = document.querySelector('form');
let type = "radio";
let inputs = document.querySelectorAll('input[type=radio]')
let out = document.querySelector('output');
let button = document.querySelector('button');
f.addEventListener('submit', ev => {
  ev.preventDefault();
  let fd = new FormData(f);
  out.innerText = JSON.stringify(
    fd.getAll('recordlabel')
  );
});
button.addEventListener('click', ev =>{
  ev.preventDefault();
  type = type === 'radio' ? 'checkbox' : 'radio';
  inputs.forEach(i => {
    i.type = type
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.