如果文本框不为空，则选中复选框

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”类。