Dynamically Created Radio Buttons in Javascript

By Sandeep Singh Shekhawat Oct 13, 2012
Using one Button and a Div to create radio button pair (Yes/No) on button click. I described by comment on each line which help to understand the view.

Using a Button and a Div to create radio button pair (Yes / No) on button click. I described by comment on each line which help to understand the view.

Source Code:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioDemo.aspx.cs" 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">


    <script type="text/javascript">


    /* Getting Id of Div in which radio button will be add*/

        var containerDivClientId = "<%= containerDiv.ClientID %>";


    /*variable count uses for define unique Ids of radio buttons and group name*/

        var count = 100;


    /*This function call by button OnClientClick event and uses for create radio buttons*/

        function dynamicRadioButton()


            /* create a radio button */

            var radioYes = document.createElement("input");

            radioYes.setAttribute("type", "radio");


            /*Set id of new created radio button*/

            radioYes.setAttribute("id", "radioYes" + count);


            /*set unique group name for pair of Yes / No */

            radioYes.setAttribute("name", "Boolean" + count);


            /*creating label for Text to Radio button*/

            var lblYes = document.createElement("lable");


            /*create text node for label Text which display for Radio button*/

            var textYes = document.createTextNode("Yes");


            /*add text to new create lable*/



            /*add radio button to Div*/



            /*add label text for radio button to Div*/



            /*add space between two radio buttons*/

            var space = document.createElement("span");

            space.setAttribute("innerHTML", "&nbsp;&nbsp");



            var radioNo = document.createElement("input");

            radioNo.setAttribute("type", "radio");

            radioNo.setAttribute("id", "radioNo" + count);

            radioNo.setAttribute("name", "Boolean" + count);


            var lblNo = document.createElement("label");

            lblNo.innerHTML =  "No";



            /*add new line for new pair of radio buttons*/

            var spaceBr= document.createElement("br");




            return false;





    <form id="form1" runat="server">


    <asp:Button ID="btnCreate" runat="server" Text="Click Me" OnClientClick="return dynamicRadioButton();" />

    <div id="containerDiv" runat="server"></div>






Radio Button.PNG

Sandeep Singh Shekhawat
Sandeep Singh Shekhawat

Sandeep Singh Shekhawat is a Software Developer. He is awarded for C# Corner MVP(2013,2014 and 2015) and CodeProject MVP (2015). His three articles at CodeProject are prize wining in article competition. His more than 10... Read more


Latest Blogs