0

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

}
4

2 回答 2

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

演示

于 2013-05-20T16:29:53.760 回答
1

根据您是要针对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 + " "));
}

参考：

于 2013-05-20T16:51:44.160 回答