Why the input[type=radio]'s defalut value is 'on' instead of ''?

Question

Just show the code:

function show() {
  console.log(document.querySelector('input[type=radio]').value) // 'on'
}

<input type="radio">

<button onclick="show()">Show value</button>

Answer 1

It's the default value for radio and checkbox input. It does not mean that radio button is currently "on". The property you would want for that is checked.

<input type="radio" value="Another Value">
<script>
  console.log(document.querySelector('input[type=radio]').checked)
  console.log(document.querySelector('input[type=radio]').value) // 'on'
</script>