Question

我需要使用createElement（）在循环中创建单选按钮。单选按钮已成功创建。但是，如果我在选择第一个之后选择了第二个单选按钮，则第一个不会被取消选择。以下是plnkr for customized radio button using createElement()。任何帮助将不胜感激。

function myFunction() {
  var obdiv = document.getElementById("odiv")
  for (var i = 0; i < 5; i++) {
    var y = document.createElement("LABEL")
    var att = document.createAttribute("class")
    att.value = "container"
    y.setAttributeNode(att)
    var spane = document.createElement("span")
    var spanatt = document.createAttribute("class")
    spanatt.value = "checkmark"
    spane.setAttributeNode(spanatt)
    const btn = document.createElement('input')
    btn.type = 'radio'
    y.appendChild(btn)
    y.appendChild(spane)
    obdiv.appendChild(y)
  }
}

/* The container */
.container {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

<body onload="myFunction()">
  <div id="odiv"></div>
</body>

Answer 1

您需要添加btn.name="yourname"，就是这样

要对单选按钮进行分组，需要提供您的首选名称。

function myFunction() {
  var obdiv = document.getElementById("odiv")
  for (var i = 0; i < 5; i++) {
    var y = document.createElement("LABEL")
    var att = document.createAttribute("class")
    att.value = "container"
    y.setAttributeNode(att)
    var spane = document.createElement("span")
    var spanatt = document.createAttribute("class")
    spanatt.value = "checkmark"
    
    spane.setAttributeNode(spanatt)
    const btn = document.createElement('input')
    btn.type = 'radio'
    btn.name="yourname"
    y.appendChild(btn)
    y.appendChild(spane)
    obdiv.appendChild(y)
  }
}

/* The container */
.container {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

<body onload="myFunction()">
  <div id="odiv"></div>
</body>

Answer 2

我认为您应该为电台设置名称（btn.name ='radio_group'）;。

function myFunction(){
var obdiv = document.getElementById("odiv")
for(var i=0;i<5;i++){
var y = document.createElement("LABEL");
          var att = document.createAttribute("class") 
          att.value = "container";  
          y.setAttributeNode(att) ; 
          var spane = document.createElement("span");
          var spanatt = document.createAttribute("class");
          spanatt.value = "checkmark";
          spane.setAttributeNode(spanatt);
          const btn = document.createElement('input');
          btn.type = 'radio';
          btn.name = 'radio_group';
          y.appendChild(btn);
          y.appendChild(spane);
          obdiv.appendChild(y);
		  }
}

/* The container */
.container {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="myFunction()">
</body>
<div id = "odiv"></div>

在for循环中使用createElement（）的自定义单选按钮未取消选择

2 个答案: