添加新復選框將其他復選框取消選中

Question

當我添加新復選框時，會將舊復選框設置為未選中狀態（即使已選中）。 我該如何解決？

這是我的代碼：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function zaza() {
    document.body.innerHTML+=
        '<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>';
}

</script>
</head>
<body>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<p onclick="zaza()">add</p>
</body>
</html>

Answer 1

問題是您重寫正文html：

document.body.innerHTML+=

而是嘗試將復選框附加到正文。

 function zaza() { var div = document.createElement('div'); div.innerHTML = '<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>'; document.body.appendChild(div); }

 p { cursor: pointer; }

 <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <p onclick="zaza()">add</p>

您也可以使用文檔片段：

 function zaza() { var child = document.createDocumentFragment(); var tmp = document.createElement('input'); tmp.type = 'checkbox'; tmp.name = 'vehicle'; tmp.value = 'Bike'; child.appendChild(tmp); child.appendChild(document.createTextNode('I have a bike')); child.appendChild(document.createElement('br')); document.body.appendChild(child); }

 p { cursor: pointer; }

 <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <p onclick="zaza()">add</p>

Answer 2

您要添加具有相同名稱的復選框，必須為每個復選框指定不同的名稱

Answer 3

您需要創建元素並追加到正文中

function zaza() {
    var answer = document.createElement('input');
    answer.setAttribute('type', 'checkbox');
    answer.setAttribute('id', 'answer');
    answer.setAttribute('value', 'a');
    var answerLabel = document.createElement('label');
    answerLabel.setAttribute('for', 'answer'); // this corresponds to the checkbox id
    answerLabel.appendChild(answer);
    answerLabel.appendChild(document.createTextNode(' I have a bike'));
    document.body.appendChild(answerLabel);
    linebreak = document.createElement("br");
    answerLabel.appendChild(linebreak);
}

演示

添加新復選框將其他復選框取消選中

問題描述

3 個解決方案

解決方案1
3 已采納

解決方案2
0 2015-06-09 11:23:25

解決方案3
0 2015-06-09 11:46:20

添加新復選框將其他復選框取消選中

問題描述

3 個解決方案

解決方案1 3 已采納

解決方案2 0 2015-06-09 11:23:25

解決方案3 0 2015-06-09 11:46:20

解決方案1
3 已采納

解決方案2
0 2015-06-09 11:23:25

解決方案3
0 2015-06-09 11:46:20