使用javascript驗證複選框

我有問題來驗證多個複選框，我想檢查用戶是否至少選擇了一個複選框。林嘗試document.getElementByClassName但不工作使用javascript驗證複選框

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; 

}

來源

2013-05-20 Milan Milosevic

你在哪裏，甚至試圖確定的複選框的狀態？所發佈的JavaScript代碼僅查看一些「無類型」輸入元素（我猜默認爲文本框？），但根本沒有查看複選框。（順便說一句，這是無效的。複選框的'input'標籤需要關閉。） – David

你可以試一下if（document.getElementById（「formupload」）。querySelectorAll（'input [name =「channel [ ]「]：checked'）。length> 0）{}' – Ian

@大衛輸入元素不需要關閉，因爲它們可能不包含任何內容。實際上，該規範禁止關閉標籤。 –

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

來源

2013-05-20 16:29:53

它應該是if（checkBoxes [i] .checked）。另外，我相信它應該是getElementsByTagName（'input'），並在for循環中檢查類型=='checkbox'。 – Phaedrus

請記住，9.0之前的IE版本不支持getElementByClassName。 – Phaedrus

@Phaedrus所以它更好 'var checkBoxes = document.getElementsByName（「channel []」）;'' –

根據您是否蒼白噸至針對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

來源

2013-05-20 16:51:44 Ian

使用javascript驗證複選框

回答

相關問題