Question

<head>
    <script type="text/javascript">
        var p=0;
    </script>
</head>
<body>
<form name="quiz" method="post" action="evaluate.jsp">
   <script type="text/javascript">
                   <input type="radio" name="q"+p value="hi">charles
                   <input type="submit">
     </script>

  </form>  
  </body>

任何人都可以帮我解决如何连接像q0这样的无线电按钮的名称。我要求使用for循环增加radiobutton q0，q1，q2等的名称。帮帮我..

Answer 1

以下面的方式格式化您的javascript代码。

<script type="text/javascript">

var p=0;
document.write('<input type="radio" name="q'+p+'" value="hi">charles');
document.write('<input type="submit">');

</script>

Answer 2

document.write()的替代方法（在某些情况下可以阻止浏览器进行某些页面加载优化），只是在加载后修改DOM并使用脚本添加所需的name属性到输入标签。

<head>
 <script type="text/javascript">
  var p=0;
 </script>
</head>
<body>

<form name="quiz" method="post" action="evaluate.jsp">
    <input id="radio1" type="radio" value="hi">charles
    <input type="submit">
</form>  
<script type="text/javascript">
    document.getElementById("radio1").name = "q" + p;
</script>
</body>

Answer 3

这应该放在你的脚本标签内以创建你的输入：

function createInputs(totalInputsNeeded) {
    var rdo, parent;

    parent = document.getElementById('parentId');

    for (var i = 0; i < totalInputsNeeded; i++) {        
        rdo = document.createElement('input');

        rdo.setAttribute('type','radio');
        rdo.setAttribute('name','q' + i.toString());
        rdo.setAttribute('value', 'yourValue');

        parent.appendChild(rdo);
    }
}

如果只是添加到现有无线电的名称，您可以这样做：

function appendToNames() {
    var elems = document.getElementsByName('q');

    for (var i = 0; i < elems.length; i++) {
        elems[i].setAttribute('name', elems[i].getAttribute('name') + i.toString());
    }
}

Answer 4

我认为重要的是要说明OP可能遇到的问题，正如他所说的那样，所以我编写了这个jsFiddle，以显示为每个单选按钮分配相同名称和更改每个单选按钮的名称之间的区别与众不同。

第一行中的单选按钮都可以检查......但是你将无法取消选中它们，因为它们没有任何东西可以关闭它们（没有其他具有相同名称的单选按钮可以将它们关闭）

第二行中的单选按钮将按预期单选按钮组的方式工作...一次只能检查其中一个单选按钮。

http://jsfiddle.net/2ENZP/1/

HTML：

<form name="quiz" method="post" action="evaluate.jsp">
    <h3>Buttons with Differing Names</h3>
    <fieldset id="buttonsDiffNames">
    </fieldset>

    <h3>Buttons with Same Names</h3>
    <fieldset id="buttonsSameNames">
    </fieldset>
    <input type="submit">
</form>

使用Javascript：

var radioBtns = [
    {id:0,name:"charles"},
    {id:1,name:"diana"},
    {id:2,name:"peter"},
    {id:3,name:"sofia"},
    {id:4,name:"reggie"},
    {id:5,name:"jim"}
];

// set up templates for use by the examples, below.
var tmpl  = '<input type="radio" name="{ID}" value="{ID}">{NAME}';
var tmpl2 = '<input type="radio" name="{ID}" value="{NAME}">{NAME}';

// This one will populate the first list, with buttons
// that all have different names
function populateWithDifferingNames(){
    // get a ref to the fieldset we're going to add these to
    var fieldSet = document.getElementById("buttonsDiffNames");
    // create an array to act as a StringBuilder
    var sb = [];

    // loop through your dataset... 
    for(var i = 0; i < radioBtns.length; i++){
        // add a string to the sb array, replacing the templated
        // areas with the incremented radio button id and the name
        // from the dataset
        sb.push(tmpl.replace(/\{ID\}/gi,"q" + radioBtns[i].id).replace("{NAME}", radioBtns[i].name));
    }
    // set the fieldset's innerHTML to the joined string representation
    // of the sb array
    fieldSet.innerHTML = sb.join("\n");
}

// Same idea, but with matching names
function populateWithSameNames(){
    var fieldSet = document.getElementById("buttonsSameNames");
    var sb = [];

    for(var i = 0; i < radioBtns.length; i++){
        sb.push(tmpl2.replace(/\{ID\}/gi,"q").replace(/\{NAME\}/gi, radioBtns[i].name));
    }
    fieldSet.innerHTML = sb.join("\n");
}

window.onload = function() {
    populateWithDifferingNames();
    populateWithSameNames();
}();

在Javascript中使用变量

4 个答案: