Проверка флажка с javascript

Question

У меня проблема проверки флажка multi, я хочу проверить, выбрал ли пользователь хотя бы один флажок. Im попробовать с document.getElementByClassName, но не работает

HTML:

<form id="formupload" method="post" enctype="multipart/form-data" action="upload.php" name="formupload"> 
    <input onKeydown="javascript:validateForm();" id="txtFileName" name="txtFileName" /> 
    <input onKeydown="javascript:validateForm();" id="title" name="title" /> 
    <input onKeydown="javascript:validateForm();" id="keywords" name="keywords" /> 
    <input onKeydown="javascript:validateForm();" id="description" name="description" /> 


     <span class="niche"> 
     <input type="checkbox" value="1" name="channel[]" class="css-checkbox" id="box_1"> 
     <label class="css-label" name="lbl_1" for="box_1">Amateur</label> 
     </span> 

     <span class="niche"> 
     <input type="checkbox" value="2" name="channel[]" class="css-checkbox" id="box_2"> 
     <label class="css-label" name="lbl_2" for="box_2">Amateur</label> 
     </span> 

     <span class="niche"> 
     <input type="checkbox" value="3" name="channel[]" class="css-checkbox" id="box_3"> 
     <label class="css-label" name="lbl_3" for="box_3">Amateur</label> 
     </span> 

<button id="btnSubmit" class="btn lbtn upBtn" type="submit">Upload</button> 
</form> 

И вот JavaScript:

function validateForm() { 
    var txtFileName = document.getElementById("txtFileName"); 
    var titleTxt = document.getElementById("title"); 
    var tagsTxt = document.getElementById("keywords"); 
    var descTxt = document.getElementById("description"); 

    var isValid = true; 
    if (txtFileName.value === "" || titleTxt.value === "" || tagsTxt.value === "" || descTxt.value === "") { 
     isValid = false; 
    } 

    document.getElementById("btnSubmit").disabled = !isValid; 

} 

Answer 1

var checkBoxes=document.getElementsByClassName("css-checkbox"); 

var booleanResult=false; 
for(var i=0;i<checkBoxes.length;i++){ 
if(checkBoxes[i].checked){ 
    booleanResult=true; 
    break; 
} 
} 
if(booleanResult==false){ 
alert("invalid") 
} 

DEMO

Answer 2

В зависимости от того, изнуренный т целевой class или name, вы можете попробовать querySelectorAll:

var form = document.getElementById("formupload"); 
if (form.querySelectorAll('input[name="channel[]"]‌​:checked').length > 0) { 

} 
// or 
if (form.querySelectorAll('input.css-checkbox​:checked').length > 0) { 

} 

Конечно, вы могли бы добавить [type="checkbox"] ни к одному из них, но это, кажется, своего рода ненужными.

document.querySelectorAll имеет лучшую поддержку в старых браузерах и более универсален.

Конечно, если вам нужна более эффективная поддержка, вы можете получить все флажки, прокрутить их и проверить, есть ли у них класс, а затем проверить, проверено ли более одного. Например:

var form = document.getElementById("formupload"), 
    inputs = form.getElementsByTagName("input"), 
    i, cur, enoughChecked = false; 
for (i = 0; i < inputs.length; i++) { 
    cur = inputs[i]; 
    if (cur.type === "checkbox" && hasClass(cur, "css-class") && cur.checked) { 
     enoughChecked = true; 
     break; 
    } 
} 
if (enoughChecked) { 
    // At least 1 checkbox is checked 
} 

function hasClass(element, className) { 
    return !!~(" " + element.className + " ").indexOf(" " + className + " ")); 
} 

Ссылка:

• https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll