Ошибка при использовании булева с простой проверкой

Question

Не могли бы вы взглянуть на This Demo и сообщить мне, почему эта ошибка происходит во время проверки двух типов входных параметров?

Технически, что происходит, если пользователь не выбирает ни один из флажков и не выбирает параметры и не нажимает кнопку отправки, появляется сообщение об ошибке, а validRequest boolean остается в 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 независимыми, если заявления в то время как вы должны быть только один. Также вы проверяли, если выбрать поле будет пустым == 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;}