时间戳

首页 > 解决方案 > 如何通过javascript为单选按钮赋予标题

javascript - 如何通过javascript为单选按钮赋予标题

问题描述

我正在尝试给单选按钮一个标题，因为它正在动态创建它怎么可能

这是我的代码

var i = 3; 
function textAreaCreate(){

var l = document.createElement("label");
l.innerHTML = "Option " + i;
document.getElementById("myForm").appendChild(l);

var r = document.createElement("input");
r.innerHTML = "Option " + i;
r.setAttribute("type", "radio");
r.setAttribute("Name", "CorrectAns");
document.getElementById("coreectOpt").appendChild(r);

i++;

}

和html代码

<div  id="coreectOpt"> //For radio button
</div>

<div class="form-group"  id="myForm"> //For label                                
</div>
 <a href="#" class="textAreaCreate" onclick="textAreaCreate()">Add More Options</a>

标签工作成功，但单选按钮没有在此处输入图像描述

我想要C，D等等，

标签： javascripthtmlbootstrap-4

解决方案

目前，您分配的文本只是Option与一个数字连接。如果要改用字母，可以使用fromCharCode将数字转换为字母。

此外，要在单击标签时单击单选按钮，请为label'for属性分配一个唯一的字符串，并为单选按钮提供相同的id。

另请注意，单选按钮没有innerHTML属性 - 不要尝试分配给它们。

let i = 3;
function textAreaCreate() {
  const letter = String.fromCharCode(i + 62);
  const labelString = "Option " + letter;
  const l = document.createElement("label");
  // Starts at character code 62, which is "A":
  l.textContent = labelString;
  l.setAttribute('for', letter);
  document.getElementById("myForm").appendChild(l);

  const r = document.createElement("input");
  r.id = letter;
  r.setAttribute("type", "radio");
  r.setAttribute("Name", "CorrectAns");
  document.getElementById("coreectOpt").appendChild(r);
  i++;
}
<div id="coreectOpt">
</div>
<div class="form-group" id="myForm">
</div>
<a href="#" class="textAreaCreate" onclick="textAreaCreate()">Add More Options</a>

推荐阅读