非常简单的问题。
当用户点击“添加”按钮并选中复选标记时,我希望该值在 class="household"中显示为"Smoker"。
当未选中复选标记时,我希望值显示为“非吸烟者”
目前,我的“if else”语句没有触发。一直在寻找解决这个问题的地方。谁能帮忙?
旁注:没有 jQuery,无法编辑 HTML。只有纯 Javascript。
HTML
<ol class="household"></ol>
<form>
<div>
<label>Age
<input type="text" name="age">
</label>
</div>
<div>
<label>Relationship
<select name="rel">
<option value="">---</option>
<option value="self">Self</option>
<option value="spouse">Spouse</option>
<option value="child">Child</option>
<option value="parent">Parent</option>
<option value="grandparent">Grandparent</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div>
<label>Smoker?
<input type="checkbox" name="smoker">
</label>
</div>
<div>
<button class="add">add</button>
</div>
<div>
<button type="submit">submit</button>
</div>
</form>
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++
}
最佳答案
第一个问题是您没有正确获取复选框状态。它应该是 document.getElementsByName("smoker")[0].checked
而不是 document.getElementsByName("smoker")[0].value.checked
。
第二个问题是您在if else
中使用了return
。如果您使用return
,则该函数的以下代码将不会执行。
改变
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";
}
关于javascript - HTML/Javascript 表单复选框值不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41411131/