JavaScript RadioButton Setup

Home >Shield UI Documentation >RadioButton >JavaScript >JavaScript RadioButton Setup

The RadioButton widget allows you to choose one of many possible options. The controls has two states checked and unchecked. The underling element from which the widget can be created is input with type attribute set to ‘radio’. In order to render the RadioButton JavaScript widget on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add an input element for which to initialize the radio button functionality.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield RadioButton</title>
<meta charset="utf-8" />


<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<input id="radiobutton" type="radio" ></input>

<script type="text/javascript">
    $(function () {
        $("#radiobutton").shieldRadioButton({
            label: "radiobutton 1",
            checked: true
        });
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.