使用javascript验证复选框

Validating checkbox with javascript

本文关键字：复选框 验证 javascript 使用      更新时间：2023-09-26

我在验证多个复选框时遇到问题，我想检查用户是否选择了至少一个复选框。我试着用文档。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>


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;
}

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")
}

根据您是想要针对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
相关文章：