html 不显示多选框,HTML / Javascript表单复选框值未显示

相当直接的问题.

当用户点击“添加”按钮并选中复选标记时,我希望在class =“household”中说出“吸烟者”的值.

如果未选中复选标记,我希望值为“非吸烟者”

目前,我的“if else”声明没有解雇.一直在寻找解决这个问题.有人可以帮忙吗？

附注：没有jQuery,无法编辑HTML.只有纯Javascript.

HTML

Age

Relationship

---

Self

Spouse

Child

Parent

Grandparent

Other

Smoker?

add

submit

JS

function validate(form) {

fail = validateAge(form.age.value)

fail += validateRel(form.rel.value)

if (fail == "") return true

else {

alert(fail);

return false

}

}

function validateAge(field) {

if (isNaN(field)) return "No age was entered. \n"

else if (field < 1 || field > 200)

return "Age must be greater than 0. \n"

return ""

}

function validateRel(field) {

if (field == "") return "Please select a relationship \n"

return ""

}

document.querySelector("form").onsubmit = function() {

return validate(this)

}

document.querySelector(".add").onclick = function(event) {

event.preventDefault();

createinput()

}

count = 0;

function createinput() {

field_area = document.querySelector('.household')

var li = document.createElement("li");

var p1 = document.createElement("p");

var p2 = document.createElement("p");

var p3 = document.createElement("p");

var x = document.getElementsByName("age")[0].value;

var y = document.getElementsByName("rel")[0].value;

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

if( z === undefined) {

return ("Non smoker \n")

}

else {

return ("Smoker \n")

}

p1.innerHTML = x;

p2.innerHTML = y;

p3.innerHTML = z;

li.appendChild(p1);

li.appendChild(p2);

li.appendChild(p3);

field_area.appendChild(li);

//removal link

var removalLink = document.createElement('a');

removalLink.onclick = function() {

this.parentNode.parentNode.removeChild(this.parentNode)

}

var removalText = document.createTextNode('Remove Field');

removalLink.appendChild(removalText);

li.appendChild(removalLink);

count++

}