<FORM> 如果未選中任何復選框，請提醒！ .. ELSE ..提交。 （JavaScript）的

Question

語言： Javascript

我真的很討厭問這樣一個看似簡單的問題，但看起來很簡單，我無法讓它發揮作用。

我試圖完全使用純Javascript（沒有庫支持） 。

我有一個帶復選框的表格......
所有復選框都命名為files[]因為我在數組中使用結果：

<input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
<input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
<input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>

我想要做的是，當用戶提交表單時：

• 如果沒有選中復選框>>返回ALERT！
• ELSE提交表格

這是我的表格 ：

<form name="deleteFiles" action="" method="post" onsubmit="return confirm_update();">

    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>
    <input type="submit" value="Submit" name="submit">

</form>​

這是我的Javascript代碼 ：

function confirm_update() {
    var aCheckbox = document.deleteFiles.getElementsByTagName('input');

    if (aCheckbox.checked){
    return confirm("Are you sure you want to proceed deleting the selected files?");

    } else {
        alert("You do not have any selected files to delete.");
        return false;
    }
}​

在行動： http ： //jsfiddle.net/DVqwB/3/

顯然，它不起作用，我知道我應該使用getElementsById但由於它們每個都有唯一的ID我不能使用它。 而且我也知道這個網站上有很多解決方案，但如果你看 - 他們實際上使用jQuery ...

任何幫助和指導將不勝感激！ 非常感謝。

Answer 1

迭代集合的正確方法是:(完整示例）

 function confirm_update() { var arrCheckboxes = document.deleteFiles.elements["files[]"]; var checkCount = 0; for (var i = 0; i < arrCheckboxes.length; i++) { checkCount += (arrCheckboxes[i].checked) ? 1 : 0; } if (checkCount > 0){ return confirm("Are you sure you want to proceed deleting the selected files?"); } else { alert("You do not have any selected files to delete."); return false; } } 

 body { margin: 30px; } 

 <form name="deleteFiles" action="" method="post" onsubmit="return confirm_update();"> <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br /> <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br /> <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br /> <input type="submit" value="Submit" name="submit" /> </form> 

Answer 2

getElementsByTagName返回NodeList（類似於數組），而不是單個元素。

您必須循環遍歷它並依次測試每個元素，並且只有在到達循環結束時才處理“else”方案而不查找條件匹配。

Answer 3

你可以使用這個腳本。只需在表格的行動中改變你的文件名

    <form id="deleteFiles" name="deleteFiles" action="yourFileName.html" method="post" onsubmit="return confirm_update();">

    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>
    <input type="submit" value="Submit" name="submit">

</form>
    <script type="text/javascript">
    function confirm_update() {
        check=false;
        var aCheckbox = document.getElementById('deleteFiles').elements;
        for(i=0;i<aCheckbox.length;++i)
        {
            if(aCheckbox[i].type=='checkbox' && aCheckbox[i].checked)
           {
               check=true;
           }
         }
         if(check==true)
         {
             return confirm("Do u really want to delete?");
        }
        else
            {alert("you haven't selected any of the checkboxex");
            return false;
            }

    }
    </script>