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

Question

漂亮直直的前锋问题。

当用户点击“添加”按钮，勾选检查，我想价值说在类=“家”，“吸烟者”。

当勾选不检查，我想价值说“不吸烟”

目前，我的“如果其他”语句不点火。一直在寻找解决这个问题。谁能帮忙？

边注意：没有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++ 
    } 

Answer 1

第一个问题是你没有得到的复选框状态正确的方式。它应该是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"; 
} 

Answer 2

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

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

}

的例子：

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 "" 
 

 
} 
 

 

 
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].checked; 
 

 

 
    if(!z) { 
 
    z = "Non smoker"; 
 

 
    } 
 
    else { 
 
    z = "Smoker"; 
 

 
    } 
 

 

 
    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.querySelector("form").onsubmit = function() { 
 
    return validate(this) 
 

 
} 
 

 

 

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

 

 
} 
 

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

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