Onsubmit, проверить количество отмеченных флажков

Question

Я думаю, что мой мозг уже проверен и находится в праздничном режиме. Я пытаюсь сделать что-то очень простое, и я не могу заставить его работать на всю жизнь.

У меня есть форма, которая динамически генерируется с помощью кода на стороне сервера. Он может иметь один или несколько вопросов, которые имеют флажки в качестве параметров. Мне нужно проверить, чтобы убедиться, что хотя бы один элемент проверен в любой группе, и проверка должна выполняться в чистом JS (без jQuery).

Я стучал головой к столу, пытаясь заставить его работать:

HTML:

<form onsubmit="return validateCheckboxes();"> 
<h4>Which things do you enjoy?</h4> 

<input type='checkbox' name='2' value='12' id='2_12'> 
<label for='2_12'>&nbsp;&nbsp;Breathing</label><br /> 

<input type='checkbox' name='2' value='13' id='2_13'> 
<label for='2_13'>&nbsp;&nbsp;Watching paint dry</label><br /> 

<input type='checkbox' name='2' value='14' id='2_14'> 
<label for='2_14'>&nbsp;&nbsp;Nothing</label><br /> 
<br /> 
<br /> 
<input type="button" value="Submit"> 

Javascript:

function validateCheckboxes() { 
    if (document.querySelector('.2:checked')) { 
     alert('something is checked'); 
     return true; 
    } else { 
     alert('NOTHING is checked'); 
     return false; 
    } 
}; 

jsFiddle Ссылка: https://jsfiddle.net/r6c4hxhj/

Answer 1

Селектор .2:checked ищет class="2" в чекбоксах. Для выбора флажков с name="2" вы должны использовать

document.QuerySelector('[name="2"]:checked') 

function validateCheckboxes() { 
 
    if (document.querySelector('[name="2"]:checked')) { 
 
     alert('something is checked'); 
 
     return true; 
 
    } else { 
 
     alert('NOTHING is checked'); 
 
     return false; 
 
    } 
 
};

<form onsubmit="return validateCheckboxes();"> 
 
<h4>Which things do you enjoy?</h4> 
 

 
<input type='checkbox' name='2' value='12' id='2_12'> 
 
<label for='2_12'>&nbsp;&nbsp;Breathing</label><br /> 
 

 
<input type='checkbox' name='2' value='13' id='2_13'> 
 
<label for='2_13'>&nbsp;&nbsp;Watching paint dry</label><br /> 
 

 
<input type='checkbox' name='2' value='14' id='2_14'> 
 
<label for='2_14'>&nbsp;&nbsp;Nothing</label><br /> 
 
<br /> 
 
<br /> 
 
<input type="submit" value="Submit"> 
 
</form>

Answer 2

С .2:checked вы тестируете класс, а 2 - это значение имени. Добавьте class=2 на свои флажки.

Answer 3

можно перебирать каждый флажок, чтобы увидеть, если он установлен на представлении.

cool Я только что чему-то научился, я не знал, что вы можете использовать псевдоселекторы с querySelectorAll. Я все еще думаю, что это действительный шаблон, хотя, если вы хотите сравнить общее количество проверок с полными флажками, чтобы сделать его более динамичным. без другого дорогостоящего вызова атрибута запросаSelector.

function validateCheckboxes(form){ 
 
    var checkboxes = slice(form.querySelectorAll('[type=checkbox]')), 
 
     ret = checkboxes.reduce(function(total, checkbox){ 
 
     if(checkbox.checked){ 
 
      ++total; 
 
     } 
 
     return total; 
 
     }, 0); 
 
    
 
    console.log(ret + ' of ' + checkboxes.length + ' checkboxes checked'); 
 
    return false; // to cancel submission for stack 
 
} 
 

 
function slice(arr, start){ 
 
    return Array.prototype.slice.call(arr, start || 0); 
 
}

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script> 
 
<form onsubmit="return validateCheckboxes(this);"> 
 
<h4>Which things do you enjoy?</h4> 
 

 
<input type='checkbox' name='2' value='12' id='2_12'> 
 
<label for='2_12'>&nbsp;&nbsp;Breathing</label><br /> 
 

 
<input type='checkbox' name='2' value='13' id='2_13'> 
 
<label for='2_13'>&nbsp;&nbsp;Watching paint dry</label><br /> 
 

 
<input type='checkbox' name='2' value='14' id='2_14'> 
 
<label for='2_14'>&nbsp;&nbsp;Nothing</label><br /> 
 
<br /> 
 
<br /> 
 
<input type="submit" value="Submit">

Answer 4

Форма элемента требуется закрывающий тег </form>

Кнопка должна быть представить <input type="submit"/>

Для того, чтобы получить HTMLCollection, использование:
var chkList = document.querySelectorAll('input[type="checkbox"]:checked');

Затем с помощью простого условного от длины коллекции: if (chkList.length > 0)

http://plnkr.co/edit/PXiQCk0f7Qu3H5EYIgOF?p=preview

function validateCheckboxes() { 
 
    var chkList = document.querySelectorAll('input[type="checkbox"]:checked'); 
 
    if (chkList.length > 0) { 
 
    alert('something is checked'); 
 
    return true; 
 
    } else { 
 
    alert('NOTHING is checked'); 
 
    return false; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <form onsubmit="return validateCheckboxes();" action="http://examples.funwebdev.com/process.php" method="post"> 
 
    <fieldset> 
 
     <legend>Which things do you enjoy?</legend> 
 

 
     <input type='checkbox' name='2' value='12' id='2_12'> 
 
     <label for='2_12'>&nbsp;&nbsp;Breathing</label> 
 
     <br /> 
 

 
     <input type='checkbox' name='2' value='13' id='2_13'> 
 
     <label for='2_13'>&nbsp;&nbsp;Watching paint dry</label> 
 
     <br /> 
 

 
     <input type='checkbox' name='2' value='14' id='2_14'> 
 
     <label for='2_14'>&nbsp;&nbsp;Nothing</label> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
     <input type="submit" value="Submit"> 
 
    </fieldset> 
 
    </form> 
 
</body> 
 

 
</html>