驗證復選框選擇
[英]Validate checkbox selections
問題描述
請檢查下面的JavaScript代碼。 一旦我單擊“上傳”，我總是得到“您沒有檢查任何項目”，但是我檢查了一些項目，我得到了相同的警報運行。 我該如何糾正它，才能按照我選擇的項目執行？
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="check_item" value="1">Item 1<br/>
<input type="checkbox" name="check_item" value="2">Item 2<br/>
<input type="checkbox" name="check_item" value="3">Item 3<br/>
<input type="button" class="uploadExternal" value="Upload"/>
</form>
<script type="text/javascript">
$(document).on("click", ".uploadExternal", function (e) {
var check_item = document.getElementsByClassName("check_item");
if (check_item.checked) {//check if check_item empty
alert("You have checked item");
} else {
alert("You didn't checked any item");
}
});
</script>
</body>
</html>
4 個解決方案
解決方案1
0 2017-07-25 10:14:23
document.getElementsByClassName方法返回具有所有給定類名稱的所有子元素array-like對象。
您應該遍歷所有項目以檢查是否已檢查任何項目。
為此，您可以使用Array.from函數創建一個包含所有帶有check_item類的復選框元素的array 。
Array.from（）方法從類似於數組或可迭代對象的對象創建一個新的Array實例。
接下來，您必須檢查是否至少有一個checkbox DOM元素被checked 。 為此，您應該使用some功能。
some函數接受應用於上述數組中每個項目的callback提供的方法。
var checked=Array.from(check_item).some(function(checkbox){
return checkbox.checked;
});
$(document).on("click", ".uploadExternal", function (e) { var check_item = document.getElementsByClassName("check_item"); var checked=Array.from(check_item).some(function(checkbox){ return checkbox.checked; }); if (checked){ alert("You have checked item"); } else { alert("You didn't checked any item"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" class="check_item" name="check_item" value="1">Item 1<br/> <input type="checkbox" class="check_item" name="check_item" value="2">Item 2<br/> <input type="checkbox" class="check_item" name="check_item" value="3">Item 3<br/> <input type="button" class="uploadExternal" value="Upload"/> </form>
解決方案2
0 已采納 2017-07-25 10:15:53
方法document.getElementsByClassName("check_item")返回元素數組。 您需要遍歷它們。 使用checked屬性，您可以確定該復選框是否已選中。 結果是這樣的：
var check_item = document.getElementsByClassName("check_item");
var isChecked = false;
for (var i = 0; i < check_item.length; i++) {
if (check_item[i].checked) {
isChecked = true;
break;
}
}
if (isChecked) { ...
解決方案3
0 2017-07-25 10:22:42
$(document).on("click", ".uploadExternal", function(e) { var check_item = document.getElementsByClassName("check_item"); console.log(check_item); if (check_item[0].checked) { //check if check_item empty alert("You have checked item 1"); } else if (check_item[1].checked) { //check if check_item empty alert("You have checked item 2"); } else if (check_item[2].checked) { //check if check_item empty alert("You have checked item 3"); } else { alert("You didn't checked any item"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" class="check_item" value="1">Item 1<br/> <input type="checkbox" class="check_item" value="2">Item 2<br/> <input type="checkbox" class="check_item" value="3">Item 3<br/> <input type="button" class="uploadExternal" value="Upload" /> </form>
您已經調用document.getElementsByClassName("check_item"); 但是在您的html代碼中，您沒有提及類屬性。
試試這個小提琴
解決方案4
0 2017-07-25 10:26:21
請為您的所有商品添加分類標簽，或按名稱獲取商品
<script type="text/javascript">
$(document).on("click", ".uploadExternal", function (e) {
var check_item = document.getElementsByName("check_item");
for(var i = 0; i < check_item.length; i++)
{
if(check_item.item(i).checked)
{
alert("You have checked item");
return ;
}
}
alert("You didn't checked any item");
});
</script>
分組復選框選擇
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.