<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
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.