检查是否检查了所有输入

Question

我有2个按钮和2个输入."买"按钮只应在检查两个输入时触发其默认功能.如果没有,它应该用红色边框标记它们.我在这做错了什么？

jQuery(function($) {
	$('.checkedterms:checked').length == $('.checkedterms').length
	$("#upsellyes").click(function(e) {
		$(".checkedterms").change(function(){
			if (!$('.checkedterms:checked').length == $('.checkedterms').length) {
				e.preventDefault();
				$("#terms-required").addClass('invalid');
			} 
			else {
				$("#terms-required").removeClass('invalid');
			}
		});
	});
});

.invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="terms-required">
<input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Allgemeinen Geschäftsbedingungen</a>.<span class="required">*</span></label><br />
<input type="checkbox" class="checkedterms" name="terms" id="terms" style="position: absolute;"><label for="terms" class="checkbox" style="display: inline-block!important;font-weight:normal!important;margin-left: 25px;">I have read <a href="#" >Widerrufsbelehrung</a>.<span class="required">*</span></label><br />
</div><br>
<a href="#" id="upsellyes">buy</a><br><br>
<a href="#">no thanks</a>

Answer 1

这里有几个问题:

• 你在代码的开头有一个相等的检查,什么都不做.
• 你已经在按钮change处理程序的复选框上嵌套了处理click程序; 去掉它.
• 与此问题无关,但您使用的是重复的id属性.它们需要在DOM中是唯一的.
• 你的逻辑是倒退的.您声明只有在单击"购买"按钮时未选中两个复选框时才会显示红色边框.

您还可以通过缓存复选框选择器并使用来使逻辑更简洁toggleClass().像这样的东西:

jQuery(function($) {
  $("#upsellyes").click(function(e) {
    var $terms = $('.checkedterms');
    $("#terms-required").toggleClass('invalid', $terms.length != $terms.filter(':checked').length);
  });
});

.invalid {
  border: 1px solid red;
}

.checkedterms {
  position: absolute;
}

label {
  display: inline-block!important;
  font-weight: normal!important;
  margin-left: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="terms-required">
  <input type="checkbox" class="checkedterms" name="terms" />
  <label for="terms" class="checkbox">
    I have read <a href="#">Allgemeinen Geschäftsbedingungen</a>.
    <span class="required">*</span>
  </label><br />
  <input type="checkbox" class="checkedterms" name="terms" />
  <label for="terms" class="checkbox">
    I have read <a href="#" >Widerrufsbelehrung</a>.
    <span class="required">*</span>
  </label><br />
</div><br />

<a href="#" id="upsellyes">buy</a><br><br>
<a href="#">no thanks</a>

最后请注意使用单独的样式表.内联样式是一个坏主意,应尽可能避免.