JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<label><input name="test" type="checkbox">Option 1</label>
<label><input name="test" type="checkbox">Option 2</label>
<label><input name="test" type="checkbox">Option 3</label>
<br>

<form id="frm1">
<label><input value="a" id="rd1" name="test2" type="radio">Option 1</label>
<label><input value="b" id="rd2" name="test2" type="radio">Option 2</label>
<label><input value="c" id="rd3" name="test2" type="radio">Option 3</label>
</form>

<button onClick="info()">
info:selected value
</button>

<button onClick="reset()">
reset
</button>

<button onClick="disable()">
disabled
</button>

<button onClick="disable();reset()   ">
disabled + reset
</button>

JavaScript

document.getElementById("rd1").checked =false
alert(document.getElementsByName("test2").length)

var frm1 = document.getElementById("frm1")

var rad_btns = document.getElementsByName("test2")

function info(){
alert(frm1.elements["test2"].value)
}
var disabled = false
function disable(){
	disabled= !disabled;
  if(disabled){
  	rad_btns.forEach((r)=>r.disabled = disabled )
  } else {
   	rad_btns.forEach((r)=>r.disabled = disabled )
  }
}
function reset(){
	rad_btns.forEach((r)=>r.checked = false )
  return true
}