Как установить флажки <2 и> 4 в JavaScript

Question

Я пытаюсь проверить пользовательский ввод для флажков greater than 2 и less than 4.

Я должен сделать эту проверку перед отправкой формы.

Хотя я использую AlloyUI для проверки на стороне клиента. Вы можете помочь мне с ванильным JavaScript.

Пожалуйста, помогите мне с моим кодом ...

<% for(loop here which generates more than one checkbox) { %>
<form name=".." method=".." action=".." onSubmit="return checkBox();">
  <input type="checkbox" id=".." name=".."/>
</form>
%>

Мой JavaScript

function checkBox(){
        alert("start");
        var total = 0;
        var max = form.checkcompare.length;
        alert(max);
        for(var idx = 0; idx < max; idx++)
        {
        if(eval("document.compareform.checkcompare[" + idx + "].checked") == true)
        {
            alert("checking");
        total += 1;
        }
        }
        if (total==2 || total==4)
        {
        /*  document.compareform.submit(); */
        alert("success");
        }
        else
        {
            alert('Select minimum of 2 or maximum of 4 Estimates');
        }
        //alert("You selected " + total + " boxes.");
        }

Это не работает .. кто-то может помочь .. Спасибо

Answer 1

Что-то подсказывает мне, что ты мало представляешь, что делаешь.

Прежде всего, вы создаете одну форму для КАЖДОГО флажка.Откройте тег формы, затем вставьте в свой цикл, чтобы добавить флажки, затем закройте форму.

Теперь для вашего скрипта ...

form не определено, так что вы можете получить егоэлементы.form.checkcompare не определено, поэтому вы не можете получить его длину.Вы, вероятно, хотите передать this в событии onSubmit (onSubmit="return checkBox(this);") и function checkBox(form).Затем используйте form.querySelectorAll('input[type=checkbox]');.

Далее, почему в мире вы используете зло eval просто для получения индекса массива?

Как будто этого недостаточно, вы говорите, что хотите "между 2 и 4 ", но ваш код считает" 3 "недействительным.

Наконец, вы не return ничего.

Фиксированный (и улучшенный) код:

function checkBox(form){ 
    var total = 0; 
    var boxes = form.querySelectorAll('input[type=checkbox]:checked').length;
    if (boxes < 2 || boxes > 4)
        return true;
    else { 
        alert('Select minimum of 2 or maximum of 4 Estimates'); 
        return false;
    } 
}

Answer 2

function getNumberOfCheckedCheckboxes ( form ) {
  var returnValue = 0;
  var inputElements = form.getElementsByTagName("input");
  for (var i = 0; i < inputElements.length; i ++) {
    if (inputElements.type == "checkbox") {
      if (inputElments.checked) {
        returnValue ++;
      }
    }
  }
  return returnValue;
}