Javascript 添加新复选框会使其他复选框处于未选中状态_Javascript_Html_Checkbox

Javascript 添加新复选框会使其他复选框处于未选中状态

javascript html checkbox

Javascript 添加新复选框会使其他复选框处于未选中状态,javascript,html,checkbox,Javascript,Html,Checkbox,当我添加一个新的复选框时，旧的复选框被设置为未选中（即使它们被选中）。我怎样才能解决它这是我的代码： <%@ 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/htm

当我添加一个新的复选框时，旧的复选框被设置为未选中（即使它们被选中）。我怎样才能解决它

这是我的代码：

<%@ 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>


在此处插入标题
函数zaza（）{
document.body.innerHTML+=
“我有一辆自行车
”；
}
我有一辆自行车
添加

如果要添加具有相同名称的复选框，则必须为每个复选框指定不同的名称

问题在于覆盖正文html：

document.body.innerHTML+=

相反，尝试将复选框附加到正文

函数zaza（）{
var div=document.createElement（'div'）；
div.innerHTML=“我有一辆自行车
”；
文件.正文.附件（div）；
}

p{
光标：指针；
}

我有一辆自行车

add

您需要创建元素并在主体中追加

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);
}

复选框必须有不同的名称。更改名称无效。使用

innerHTML+

附加元素的方法似乎是从正文中获取现有的innerHTML，然后添加新字符串作为元素并重写它，从而导致丢失复选框。我建议您使用

.createElement（）

附加一个div来写出输入元素。这一切都一样，但我个人更喜欢创建输入元素。不过还是很好的答案！