Question

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

使用javascript验证复选框

2 个答案: