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>

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

Answer 2

删除此行

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

离开你

removeValue

代码未运行，因为您在按钮上的事件侦听器内的复选框上设置了事件侦听器。发生了什么事情，当你点击按钮时，javascript会在复选框上设置一个事件监听器，当状态发生变化时会触发该复选框

Answer 3

你需要第2行的if语句和另外一个'='

if ($('.checkedterms:checked').length === $('.checkedterms').length) {
 ....
}

你应该为每个输入更改添加一个eventListener

检查是否检查了所有输入

3 个答案: