驗證-至少選中一個復選框

Question

我在驗證是否至少一個復選框處於選中狀態時遇到問題。

相同的代碼用於另一種形式，並且可以完美地工作，但是我無法弄清楚為什么它不在這種形式上。

腳本：

if(jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { 
       alert("1");
       valid = valid && false;
       $("#MOTFORMERROR").css('color', 'red');
       $("#MOTFORMERROR").html("*Choose at least one");
}else{
       $("#MOTFORMERROR").html("");
}

HTML：

<td style="width: 10%;" rowspan="3">
    <div style="padding-left:5px;">
       <form id="MOTForm">
           <input name="" type="checkbox"  class="form-check-input"/> HEMS<br />
           <input name="" type="checkbox"  class="form-check-input"/> EMS<br /> 
           <input name="" type="checkbox"  class="form-check-input"/> Walk-in<br />
       </form>

       <p id="MOTFORMERROR"></p>
    </div>
</td>

在if語句塊中的代碼正在運行的所有的時間，而不是在else語句塊中的代碼，即使一個或所有復選框被選中！

Answer 1

由於未定義有效變量，因此初始代碼中存在錯誤（請參見下文）。 此錯誤在瀏覽器控制台中可見。

未捕獲的ReferenceError：有效未定義

由於該錯誤， valid = valid && false;之后的行valid = valid && false; 沒有被執行。

要解決此問題，請在運行此代碼之前聲明該變量：

var valid = false;
//...other code to check if form is valid

然后將原始JavaScript代碼移到可以在Submit上運行的函數中（例如function check() {...} ）。 請參閱下面演示的內容。 它使用jQuery函數.click（）將事件處理程序綁定到提交按鈕。 您還將注意到它使用.ready（）等待DOM准備就緒，然后再將事件處理程序綁定到Submit按鈕。

 //wait until DOM is ready to bind check function to button click $(document).ready(function(readyEvent) { $('#submit').click(check); }) var valid = false; function check() { if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); valid = valid && false; $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { console.log('no error- clearing error html'); $("#MOTFORMERROR").html(""); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input" /> HEMS <br /> <input name="" type="checkbox" class="form-check-input" /> EMS <br /> <input name="" type="checkbox" class="form-check-input" /> Walk-in <br /> <button id="submit"> Submit </button> </form> <p id="MOTFORMERROR"></p> </div> 

更新：

您在帖子上輸入了評論（回復其他評論中的問題）：

在.click的開頭聲明有效

現在，這些信息被揭示了，這使我感到上面所說的大部分內容都是無用的。 將有效聲明移到點擊處理程序中似乎是一個微不足道的更改，除此之外沒有太大不同...請參見以下示例：

 //wait until DOM is ready to bind check function to button click $(document).ready(function(readyEvent) { $('#submit').click(check); }) function check() { var valid = false; if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); valid = valid && false; $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { console.log('no error- clearing error html'); $("#MOTFORMERROR").html(""); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input" /> HEMS <br /> <input name="" type="checkbox" class="form-check-input" /> EMS <br /> <input name="" type="checkbox" class="form-check-input" /> Walk-in <br /> <button id="submit"> Submit </button> </form> <p id="MOTFORMERROR"></p> </div> 

Answer 2

您的代碼在執行javascript 時不會顯示，可能當您尋找它們時，復選框尚未呈現。

實際上，如果按照您在此處發布的確切順序運行代碼，這是完全正常的，則您的條件始終為真。

如果將代碼放在呈現所有HTML之后要調用的函數中，則一切將正常運行：

<td style="width: 10%;" rowspan="3">
    <div style="padding-left:5px;">
        <form id="MOTForm">
            <input name="" type="checkbox"  class="form-check-input"/> HEMS<br />
            <input name="" type="checkbox"  class="form-check-input"/> EMS<br />
            <input name="" type="checkbox"  class="form-check-input"/> Walk-in<br />
        </form>
        <p id="MOTFORMERROR"></p>
    </div>
</td>



<!-- ... -->



<button id="check_btn">Click me</button>



<!-- ... -->



<script>
var valid;

$('#check_btn').click(function() {
    if ($('#MOTForm input[type=checkbox]:checked').length == 0) {
        valid = false;
        $("#MOTFORMERROR").css('color', 'red');
        $("#MOTFORMERROR").html("*Choose at least one");
    } else {
        $("#MOTFORMERROR").html("");
    }
});
</script>

Answer 3

請查看以下代碼段。 它確實是您要找的。 我刪除了valid變量，因為它不明顯，使用了此參數。 顯然，您可以按照自己的想法添加和使用它。

 $(function(){ function checkCheckBoxes(){ if($('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { $("#MOTFORMERROR").html(""); } } $(".js-check").on("change", checkCheckBoxes); checkCheckBoxes(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td style="width: 10%;" rowspan="3"> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input js-check"/> HEMS<br /> <input name="" type="checkbox" class="form-check-input js-check"/> EMS<br /> <input name="" type="checkbox" class="form-check-input js-check"/> Walk-in<br /> </form> <p id="MOTFORMERROR"></p> </div> </td>