如果文本框不為空，則選中復選框

Question

我試圖弄清楚如何檢查所有4個輸入是否都已填寫，然后選中聯系信息復選框。 如果未填寫，請取消選中該復選框。

任何幫助，將不勝感激。

 $(document).on('change', '#ContactName, #ContactEmail, #ContactPhone', function() { if ('#ContactName, #ContactEmail, #ContactPhone' === '') { $("#contactinformation").prop("checked", false); } else { $("#contactinformation").prop("checked", true); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="ContactName">Contact name:</label> <input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="BusinessName">Business name:</label> <input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="ContactEmail">Email address:</label> <input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="ContactPhone">Phone number (business hours):</label> <input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="form-group"> <input type="checkbox" name="contactinformation" id="contactinformation" /> Contact information </div> </div> </div> 

Answer 1

更新了答案，以反映新的要求BusinessName是可選的。

參見內聯注釋：

 // Set up a blur event handler for each text field $('.form-control:not("#BusinessName")').on("blur", function(evt) { let count = 0; // Keep track of how many are filled in // Loop over all the text fields $('.form-control:not("#BusinessName")').each(function(idx, el){ // If the field is not empty.... if(el.value !== ""){ count++; // Increase the count } }); // Test to see if all 3 are filled in if(count === 3){ $("#contactinformation").prop("checked", true); // Check the box } else { $("#contactinformation").prop("checked", false); // Unheck the box } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="ContactName">Contact name:</label> <input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="BusinessName">Business name:</label> <input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="ContactEmail">Email address:</label> <input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-7"> <div class="form-group"> <label for="ContactPhone">Phone number (business hours):</label> <input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" /> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="form-group"> <input type="checkbox" name="contactinformation" id="contactinformation" disabled /> Contact information </div> </div> </div> 

Answer 2

請嘗試使用以下代碼段。

<input type="text" class="form-control input-sm InputText" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />




 $( document ).ready(function() {
    $(".InputText").change(function(){
var checkCheckBox= true; 
         $(".InputText").each(function() {
                 if ($.trim($(this).val()) != '') {
                     checkCheckBox = false;
                }
                });

         if (checkCheckBox == true)

        {
            $("#contactinformation").prop("checked",true);
        }
        else
        {


    $("#contactinformation").prop("checked",false);
            }
        });
    });

如果要驗證此內容，請在文本框中添加“ InputText”類。