关于使用简单验证使用布尔值问题

Question

您能否看看This Demo并让我知道为什么在验证两种类型的输入选择期间发生此错误？

从技术上讲，如果用户没有选择复选框和选择选项，并按下提交按钮错误信息出现，并且validRequest布尔值保留在false中，那么情况就是如此。现在，如果用户只选择复选框的情况是一样的validRequest布尔是false和错误信息显示出来但如果用户忘记选择复选框，只有从列表中选择validateQuery()验证validRequest为True，然后现在的错误信息和警告消息弹出！

您能否让我知道为什么会发生这种情况？

$(function() { 
 
    var validRequest = false; 
 

 
    function validateQuery() { 
 

 
     var selectedDoll = $('input:checkbox[name=doll]'); 
 
     if ($(selectedDoll).is(':checked')) { 
 
      validRequest = true; 
 
      $('#err').html(''); 
 
     } else { 
 
      validRequest = false; 
 
      $('#err').html('Some Thing Wrong!'); 
 
     } 
 

 
     var selectedIcecream = $("#icecream").val(); 
 
     if (selectedIcecream == 0) { 
 
      validRequest = false; 
 
      $('#err').html('Some Thing Wrong!'); 
 
     } else { 
 
      validRequest = true; 
 
      $('#err').html(''); 
 
     } 
 
    } 
 

 
    $("#isValid").on("click", function() { 
 
     validateQuery(); 
 
     if(validRequest){ alert('Ready To Go');} 
 
      console.log(validRequest); 
 
    }); 
 

 
});

#err{color:red;}

<div> 
 
    <input type="checkbox" name="doll" value="cat" />Cats 
 
    <br /> 
 
    <input type="checkbox" name="doll" value="dog" />Dogs 
 
    <br /> 
 
    <input type="checkbox" name="doll" value="bird" />Birds 
 
    <br /> 
 
    <br /> 
 
    <select id="icecream"> 
 
     <option value="0">Select From List</option> 
 
     <option value="chocolate">Chocolate</option> 
 
     <option value="vanilla">Vanilla</option> 
 
     <option value="strawberry">Strawberry</option> 
 
     <option value="caramel">Caramel</option> 
 
    </select> 
 
</div> 
 
<p> 
 
    <input type="submit" id="isValid" value="Submit now" /> 
 
</p> 
 
<p> 
 
    <div id="err"></div> 
 
</p>

Answer 1

修正：http://jsfiddle.net/byk309j8/7/

的问题是，你有2个独立的if语句，而你只能有一个。如果选择框为空== 0而不是不为空!== 0

$(function() { 
var validRequest = false; 

function validateQuery() { 

    var selectedDoll = $('input:checkbox[name=doll]'); 
    var selectedIcecream = $("#icecream").val(); 

    // checkbox is not checked, but select is 
    if ($(selectedDoll).is(':checked') && selectedIcecream == 0) { 
     validRequest = false; 
     $('#err').html('select not selected'); 
    } else if ($(selectedDoll).is(':checked') == false && selectedIcecream != 0) { 
     validRequest = false; 
     $('#err').html('checkbox not checked'); 
    } else if ($(selectedDoll).is(':checked') == false || selectedIcecream == 0) { 
     validRequest = false; 
     $('#err').html('checkbox not checked or select not selected'); 
    } else { 
      validRequest = true; 
     $('#err').html(''); 
    } 
} 

$("#isValid").on("click", function() { 
    validateQuery(); 
    if(validRequest){ alert('Ready To Go');} 
     console.log(validRequest); 
}); 
}); 

<div> 
<input type="checkbox" name="doll" value="cat" />Cats 
<br /> 
<input type="checkbox" name="doll" value="dog" />Dogs 
<br /> 
<input type="checkbox" name="doll" value="bird" />Birds 
<br /> 
<br /> 
<select id="icecream"> 
    <option value="0">Select From List</option> 
    <option value="chocolate">Chocolate</option> 
    <option value="vanilla">Vanilla</option> 
    <option value="strawberry">Strawberry</option> 
    <option value="caramel">Caramel</option> 
</select> 
    </div> 
    <p> 
    <input type="submit" id="isValid" value="Submit now" /> 
    </p> 
     <p> 
<div id="err"></div> 
    </p> 

#err{color:red;}