发表新帖
发表新帖

How do you dynamically create a radio button in Javascript that works in all browsers?

后端 未结
关注
11 1518
深忆病人
深忆病人 2020-12-01 12:12

Dynamically creating a radio button using eg 

var radioInput = document.createElement(\'input\');
radioInput.setAttribute(\'type\', \'radio\');
radioInput.se
相关标签:
11条回答
  • 情深已故
    2020-12-01 12:56

    Dynamically created radio button in javascript:

    <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”RadioDemo.aspx.cs” Inherits=”JavascriptTutorial.RadioDemo” %>

<!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”>
<title></title>
<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*/
lblYes.appendChild(textYes);

/*add radio button to Div*/
containerDiv.appendChild(radioYes);

/*add label text for radio button to Div*/
containerDiv.appendChild(lblYes);

/*add space between two radio buttons*/
var space = document.createElement(“span”);
space.setAttribute(“innerHTML”, “&nbsp;&nbsp”);
containerDiv.appendChild(space);

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”;
containerDiv.appendChild(radioNo);
containerDiv.appendChild(lblNo);

/*add new line for new pair of radio buttons*/
var spaceBr= document.createElement(“br”);
containerDiv.appendChild(spaceBr);

count++;
return false;
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:Button ID=”btnCreate” runat=”server” Text=”Click Me” OnClientClick=”return dynamicRadioButton();” />
<div id=”containerDiv” runat=”server”></div>
</div>
</form>
</body>
</html>

    (source)

    0 讨论(0)
  • 梦毁少年i
    2020-12-01 12:57

    Taking a step from what Patrick suggests, using a temporary node we can get rid of the try/catch:

    function createRadioElement(name, checked) {
    var radioHtml = '<input type="radio" name="' + name + '"';
    if ( checked ) {
        radioHtml += ' checked="checked"';
    }
    radioHtml += '/>';

    var radioFragment = document.createElement('div');
    radioFragment.innerHTML = radioHtml;

    return radioFragment.firstChild;
}
    0 讨论(0)
  • 情书的邮戳
    2020-12-01 12:59

    why not creating the input, set the style to dispaly: none and then change the display when necesary this way you can also probably handle users whitout js better.

    0 讨论(0)
  • 执念已碎
    2020-12-01 13:02

    Based on this post and its comments: http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

    the following works. Apparently the problem is that you can't dynamically set the name property in IE. I also found that you can't dynamically set the checked attribute either.

    function createRadioElement( name, checked ) {
    var radioInput;
    try {
        var radioHtml = '<input type="radio" name="' + name + '"';
        if ( checked ) {
            radioHtml += ' checked="checked"';
        }
        radioHtml += '/>';
        radioInput = document.createElement(radioHtml);
    } catch( err ) {
        radioInput = document.createElement('input');
        radioInput.setAttribute('type', 'radio');
        radioInput.setAttribute('name', name);
        if ( checked ) {
            radioInput.setAttribute('checked', 'checked');
        }
    }

    return radioInput;
}
    0 讨论(0)
  • 暗喜
    2020-12-01 13:02

    My suggestion is not to use document.Create(). Better solution is to construct actual HTML of future control and then assign it like innerHTML to some placeholder - it allows browser to render it itself which is much faster than any JS DOM manipulations.

    Cheers.

    0 讨论(0)
 看不清?
提交回复
热议问题