Javascript Reference - HTML DOM Input Radio checked Property








The checked property sets or gets the checked state of a radio button.

Browser Support

checked Yes Yes Yes Yes Yes

Syntax

Return the checked property.

var v = radioObject.checked 

Set the checked property.

radioObject.checked=true|false 

Property Values

Value Description
true|false Set whether a radio button is checked.
  • true - The radio button is checked
  • false - Default. The radio button is not checked




Return Value

A Boolean type value, true if the radio button is checked, false if the radio button is not checked.

Example

The following code shows how to check if a radio button is checked.


<!DOCTYPE html>
<html>
<body>
<!-- w  w  w  . j av a 2 s  . c  o m-->
Radio button:<input type="radio" id="myRadio" checked>
<button onclick="myFunction()">test</button>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myRadio").checked;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to check and uncheck a radio button.


<!DOCTYPE html>
<html>
<body>
<!--  w  w  w . ja  v  a 2 s.  c om-->
<form>
  What color do you prefer?<br>
  <input type="radio" name="colors" id="red">Red<br>
  <input type="radio" name="colors" id="blue">Blue
</form>

<button onclick="check()">Check</button>
<button onclick="uncheck()">Uncheck</button>

<script>
function check() {
    document.getElementById("red").checked = true;
}
function uncheck() {
    document.getElementById("red").checked = false;
}
</script>

</body>
</html>

The code above is rendered as follows: