Существует несколько способов определить это:
Проверьте length упакованного набора JQuery, который запрашивает только отмеченные флажки, и посмотрите, является ли он 1:
if($("input[name='Check_0']:checked").length === 1)
Проверьте свойство checked самого элемента DOM (что я и показываю ниже) для false.Чтобы извлечь элемент DOM из упакованного набора JQuery, вы можете передать индекс в упакованный набор (в данном случае [0]), который извлекает только один этот элемент в качестве элемента DOM, а затем вы можете использовать стандартный API DOM.
if(!$("input[type='checkbox']")[0].checked)
ПРИМЕЧАНИЕ: Важно понимать, что вся проверка на стороне клиента может быть легко обойдена любым, кто действительно этого хочет.Таким образом, вы всегда должны выполнять второй раунд проверки на сервере, который будет получать данные.
К вашему сведению: у вас есть недопустимый HTML-код: для элементов input нет закрывающего тега идля элементов label необходимо либо вложить элемент, для которого используется метка, в label, либо добавить for атрибут в label и присвоить ему значение idэлемент, для которого label "для".Я исправил обе эти вещи ниже:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="ss-item-required">
<label for="userName">Question: What is your name?</label>
<input type="text" name="userName" id="userName">
</div>
<div class="ss-item-required">
<label for="email">Question: What is your email?</label>
<input type="text" name="email" id="email">
</div>
<div class="ss-item-required">
<label for="address">Question: What is your address?</label>
<textarea name="address" rows="8" cols="75" id="address"></textarea>
</div>
<div class="ss-item-required">
<label for="Check_0">Do you agree to out terms?
<input type="checkbox" name="Check_0">
</label>
</div>
<a href="#" onclick="formcheck(); return false">Submit</a>
</form>
<script>
function formcheck() {
var fields = $(".ss-item-required")
.find("select, textarea, input").serializeArray();
$.each(fields, function(i, field) {
if (!field.value){
alert(field.name + ' is required');
}
});
// Check to see if the input is a checkbox and if it's checked
if(!$("input[type='checkbox']")[0].checked){
alert("You must agree to the terms to continue.");
}
}
</script>
Лично (и я далеко не одинок в этом), использование JQuery в современном мире слишком часто используется. Когда этоКак оказалось, стандартный DOM API не был таким зрелым, как сейчас, и JQuery сделал выбор элементов DOM и манипулирование ими очень простыми.Тогда JQuery был находкой.
Сегодня DOM API уже сформировался, и многое из того, что мы используем, чтобы упростить JQuery, можно сделать так же легко без JQuery.Это означает, что вам вообще не нужно ссылаться на библиотеку JQuery (более быстрая загрузка страниц), и ваш код соответствует стандартам.
Если вам интересно, вот ваш код без JQuery:
<form>
<div class="ss-item-required">
<label for="userName">Question: What is your name?</label>
<input type="text" name="name" id="userName">
</div>
<div class="ss-item-required">
<label for="email">Question: What is your email?</label>
<input type="text" name="email" id="email">
</div>
<div class="ss-item-required">
<label for="address">Question: What is your address?</label>
<textarea name="address" rows="8" cols="75" id="address"></textarea>
</div>
<div class="ss-item-required">
<label for="Check_0">Do you agree to out terms?
<input type="checkbox" name="Check_0">
</label>
</div>
<a href="#" onclick="formcheck(); return false">Submit</a>
</form>
<script>
function formcheck() {
// Get all the required elements into an Array
var fields = [].slice.call(document.querySelectorAll(".ss-item-required > *"));
// Loop over the array:
fields.forEach(function(field) {
// Check for text boxes or textareas that have no value
if ((field.type === "text" || field.nodeName.toLowerCase() === "textarea")
&& !field.value){
alert(field.name + ' is required');
// Then check for checkboxes that aren't checked
} else if(field.type === "checkbox" && !field.checked){
alert("You must agree to the terms to continue.");
}
});
}
</script>