HTML/Javascript表单复选框值未显示

很直接的问题

当用户点击“添加”按钮并选中复选标记时，我希望该值在class=“Househouse”中显示为“Smoker”

当未选中复选标记时，我希望该值显示为“非吸烟者”

目前，我的“if-else”语句没有触发。我一直在到处寻找解决办法。有人能帮忙吗

旁注：没有jQuery，无法编辑HTML。只有纯Javascript

HTML

年龄
关系
---
自己
配偶
小孩
父母亲
祖父母
其他
吸烟者？
添加
提交

JS

函数验证（表单）{
fail=validateAge（form.age.value）
fail+=validateRel（form.rel.value）
如果（fail==“”）返回true
否则{
警报（失败）；
返回错误
}
}
功能验证（字段）{
if（isNaN（字段））返回“未输入年龄。\n”
否则如果（字段<1 | |字段>200）
return“年龄必须大于0。\n”
返回“”
}
函数validateRel（字段）{
如果（字段==“”）返回“请选择关系\n”
返回“”
}
document.querySelector（“form”）.onsubmit=function（）{
返回验证（此）
}
document.querySelector（“.add”）.onclick=函数（事件）{
event.preventDefault（）；
createinput（）
}
计数=0；
函数createinput（）{
field_area=document.querySelector（“.househouse”）
var li=document.createElement（“li”）；
var p1=document.createElement（“p”）；
var p2=document.createElement（“p”）；
var p3=document.createElement（“p”）；
var x=document.getElementsByName（“年龄”）[0]。值；
var y=document.getElementsByName（“rel”）[0]。值；
var z=document.getElementsByName（“smoker”）[0].value.checked；
如果（z==未定义）{
返回（“非吸烟者”\n）
}
否则{
返回（“吸烟者”\n）
}
p1.innerHTML=x；
p2.innerHTML=y；
p3.innerHTML=z；
李.儿童（p1）；
li.儿童（p2）；
li.儿童（p3）；
场区面积（li）；
//拆卸连杆
var removalLink=document.createElement（'a'）；
removalLink.onclick=函数（）{
this.parentNode.parentNode.removeChild（this.parentNode）
}
var removalText=document.createTextNode（'Remove Field'）；
appendChild（removalText）；
li.appendChild（removalLink）；
计数++
}

因为您只有一个“家庭”元素，所以可以添加以下处理程序：

document.querySelectorAll('[name="smoker"]')[0].onclick = function() {
 document.getElementsByClassName('household')[0].textContent = 
                  this.checked ? 'Smoker' : 'Non-smoker';

}

例如：

函数验证（表单）{
fail=validateAge（form.age.value）
fail+=validateRel（form.rel.value）
如果（fail==“”）返回true
否则{
警报（失败）；
返回错误
}
}
功能验证（字段）{
if（isNaN（字段））返回“未输入年龄。\n”
否则如果（字段<1 | |字段>200）
return“年龄必须大于0。\n”
返回“”
}
函数validateRel（字段）{
如果（字段==“”）返回“请选择关系\n”
返回“”
}
计数=0；
函数createinput（）{
field_area=document.querySelector（“.househouse”）
var li=document.createElement（“li”）；
var p1=document.createElement（“p”）；
var p2=document.createElement（“p”）；
var p3=document.createElement（“p”）；
var x=document.getElementsByName（“年龄”）[0]。值；
var y=document.getElementsByName（“rel”）[0]。值；
var z=document.getElementsByName（“smoker”）[0]。已选中；
如果（！z）{
z=“非吸烟者”；
}
否则{
z=“吸烟者”；
}
p1.innerHTML=x；
p2.innerHTML=y；
p3.innerHTML=z；
李.儿童（p1）；
li.儿童（p2）；
li.儿童（p3）；
场区面积（li）；
//拆卸连杆
var removalLink=document.createElement（'a'）；
removalLink.onclick=函数（）{
this.parentNode.parentNode.removeChild（this.parentNode）
}
var removalText=document.createTextNode（'Remove Field'）；
appendChild（removalText）；
li.appendChild（removalLink）；
计数++
}
document.querySelector（“form”）.onsubmit=function（）{
返回验证（此）
}
document.querySelector（“.add”）.onclick=函数（事件）{
event.preventDefault（）；
createinput（）
}
document.querySelectorAll（'[name=“smoker”]'）[0].onclick=function（）{
document.getElementsByClassName（'househouse'）[0]。textContent=this.checked？'Smoker'：'Non-Smoker'
}

年龄
关系
---
自己
配偶
小孩
父母亲
祖父母
其他
吸烟者？
添加
提交

第一个问题是您没有正确获取复选框状态。它应该是

document.getElementsByName（“smoker”）[0]。已选中

，而不是

document.getElementsByName（“smoker”）[0]。值。已选中

第二个问题是在

if-else

中使用了

return

。如果使用

return

，则不会执行以下函数代码

改变

var z = document.getElementsByName("smoker")[0].value.checked;

if( z === undefined) {
    return ("Non smoker \n")
}
else {
    return ("Smoker \n")
}

到

---

嘿@gaetanoM，这不正常。该值仍然表示“未定义”，这就是为什么我要使用“if/else”语句。“if/else”语句是否有问题？@spidey677抱歉，只是现在我修复了未定义的错误。您的if错误，因为您需要选择“do”

document.querySelectorAll('[name="smoker"]')[0].onclick = function() {
 document.getElementsByClassName('household')[0].textContent = 
                  this.checked ? 'Smoker' : 'Non-smoker';

var z = document.getElementsByName("smoker")[0].value.checked;

if( z === undefined) {
    return ("Non smoker \n")
}
else {
    return ("Smoker \n")
}

var z = document.getElementsByName("smoker")[0].checked;

if (!z) {
    z = "Non smoker \n";
} else {
    z = "Smoker \n";
}