у моего javascript есть некоторая ошибка при проверке флажка

Question

У меня проблема в моем javascript. Все, что я хочу сделать, это если мой пользователь не выбирает какой-либо флажок, учитывая 10 флажков, тогда я хочу дать ему предупреждение, иначе отправьте форму. Я написал код js, но это не работает, даже если флажок установлен. Пожалуйста, укажите мне свою ошибку. Heres мой код.

window.onload = function() { 

    document.getElementById('submitbtn').onclick = function() { 
        var count = 0; 
        if(document.getElementById("pid1").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid2").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid3").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid4").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid5").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid6").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid7").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid8").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid9").checked == "checked") 
        { 
         count++; 
        } 
        if(document.getElementById("pid10").checked == "checked") 
        { 
         count++; 
        } 
        alert(count); 
        if(count == 0){ 
        alert("Please select atleast 1 product"); 
        return false;} 
        else{ 
         document.getElementById("formreturn").submit(); 
         return false;} 
       }; 
    }; 

Answer 1

Ваш ответ: использование проверил атрибут, это логическое, так что вам не нужно сравнивать его с «проверено».

Во-вторых: переписать его, так что меньше кода :)

 var count = 0; 
     for (var index = 1; index<= 10; index++){ 
      if(document.getElementById("pid" + index).checked){ 
        count++; 
      } 
     } 

Answer 2

Вы должны проверить checked свойство для truthy/falsy, потому что checked свойство является логическим. Как это:

if (document.getElementById("pid8").checked) { .. 

Даже в HTML вам не нужно присвоить строку «проверил» к «проверил» атрибут. Достаточно наличия этого атрибута.

Вы можете переписать так:

<input type="checkbox" checked="checked" /> 

как это:

<input type="checkbox" checked /> 

На самом деле вы можете присвоить что-либо к нему, и он будет проигнорирован и рассматривается как присутствие.

Это также будет работать:

<input type="checkbox" checked="DoNotCheck" /> 

---

Я вижу, что вы пытаетесь подсчитать количество проверяемых флажков. Вы можете сделать это легко, используя querySelectorAll.

Смотрите этот фрагмент:

document.getElementById('btn').onclick = function() { 
 
    var l = document.querySelectorAll("input[type=checkbox]:checked").length; 
 
    document.getElementById('result').innerText = l; 
 
}

<input type="checkbox" /><input type="checkbox" /><input type="checkbox" /> 
 
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" /> 
 
<hr /> 
 
<input id="btn" type="button" value="Go" /> 
 
<p id="result" ></p>

Answer 3

Предполагая pidX являются input s типа checkbox, вам не нужно сравнивать .checked с "checked".

Кроме того, используйте петлю ...

window.onload = function() { 
    document.getElementById('submitbtn').onclick = function() { 
     var count = 0; 
     for(var i = 1; i <= 10; i++) { 
      if (document.getElementById("pid" + i).checked) { 
       count++; 
      } 
     } 
     alert(count); 
     if (count == 0) { 
      alert("Please select at least 1 product"); 
      return false; 
     } 
     document.getElementById("formreturn").submit(); 
     return false; 
    }; 
}; 

Answer 4

<form action="some.php" id="myForm" method="POST"> 
    <input type="checkbox" name="some1" value="" id="some1"> 
    <label for="some1">title of checkbox 1</label> 
    <input type="checkbox" name="some2" value="" id="some2"> 
    <label for="some2">title of checkbox 2</label> 
    <input type="checkbox" name="some3" value="" id="some3"> 
    <label for="some3">title of checkbox 3</label> 
</form> 


$(function(){ 

    var form = $("#myForm"); 

    form.submit(function(e){ 

     if(form.find("input[type=checkbox]:checked").length > 0){ 

     } else{ 

     } 

    }); 

});