Introduction

Using a Button and a Div to create radio button pair (Yes / No) on button click. I described my comment on each line which helps to understand the view.
Source Code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadioDemo.aspx.cs" Inherits="JavascriptTutorial.RadioDemo"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <script type="text/javascript">
  8. /* Getting Id of Div in which radio button will be add*/
  9. var containerDivClientId = "<%= containerDiv.ClientID %>";
  11. /*variable count uses for define unique Ids of radio buttons and group name*/
  12. var count = 100;
  14. /*This function call by button OnClientClick event and uses for create radio buttons*/
  15. function dynamicRadioButton()
  16. {
  17. /* create a radio button */
  18. var radioYes = document.createElement("input");
  19. radioYes.setAttribute("type", "radio");
  21. /*Set id of new created radio button*/
  22. radioYes.setAttribute("id", "radioYes" + count);
  24. /*set unique group name for pair of Yes / No */
  25. radioYes.setAttribute("name", "Boolean" + count);
  27. /*creating label for Text to Radio button*/
  28. var lblYes = document.createElement("lable");
  30. /*create text node for label Text which display for Radio button*/
  31. var textYes = document.createTextNode("Yes");
  33. /*add text to new create lable*/
  34. lblYes.appendChild(textYes);
  36. /*add radio button to Div*/
  37. containerDiv.appendChild(radioYes);
  39. /*add label text for radio button to Div*/
  40. containerDiv.appendChild(lblYes);
  42. /*add space between two radio buttons*/
  43. var space = document.createElement("span");
  44. space.setAttribute("innerHTML", " ");
  45. containerDiv.appendChild(space);
  47. var radioNo = document.createElement("input");
  48. radioNo.setAttribute("type", "radio");
  49. radioNo.setAttribute("id", "radioNo" + count);
  50. radioNo.setAttribute("name", "Boolean" + count);
  52. var lblNo = document.createElement("label");
  53. lblNo.innerHTML = "No";
  54. containerDiv.appendChild(radioNo);
  55. containerDiv.appendChild(lblNo);
  56. /*add new line for new pair of radio buttons*/
  57. var spaceBr= document.createElement("br");
  58. containerDiv.appendChild(spaceBr);
  60. count++;
  61. return false;
  62. }
  63. </script>
  64. </head>
  65. <body>
  66. <form id="form1" runat="server">
  67. <div>
  68. <asp:Button ID="btnCreate" runat="server" Text="Click Me" OnClientClick="return dynamicRadioButton();" />
  69. <div id="containerDiv" runat="server"></div>
  70. </div>
  71. </form>
  72. </body>
  73. </html>
OUTPUT:
Radio Button.PNG