If text boxes are not empty check checkbox

Question

I am trying to figure out how to check if all 4 inputs are filled out then checkmark the contact information check box. If any are not filled out uncheck the checkbox.

Any help with this would be greatly appreciated.

 $(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

Answer updated to reflect new requirement that BusinessName be optional.

See the comments inline:

 // 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

Please try with below code snippet.

<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);
            }
        });
    });

Add "InputText" class in textbox, if you want to validate this thing.