Javascript 检查是否已检查所有输入

我有两个按钮和两个输入。“购买”按钮应仅在检查两个输入时启动其默认功能。如果没有，则应使用红色边框标记。我做错了什么

jQuery（函数（$）{
$（'.checkedterms:checked'）。长度==$（'.checkedterms'）。长度
$（“#upsellyes”）。单击（函数（e）{
$（“.checkedterms”）.change（函数（）{
如果（！$（'.checkedterms:checked'）。长度==$（'.checkedterms'）。长度）{
e、 预防默认值（）；
$（“#所需条款”）.addClass（'无效'）；
} 
否则{
$（“#所需条款”）.removeClass（'invalid'）；
}
});
});
});
。无效{
边框：1px纯红；
}

我读过。*

我读过。*






第2行需要一个if语句和一个以上的'='

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

每次输入更改时，您都应该放置一个eventListener，您需要在第2行添加一个if语句和一个以上的'='

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

您应该在每个输入更改中放置一个eventListener，这里有几个问题：


在代码的开头有一个等式检查，它什么也不做
您已将
change
处理程序嵌套在按钮的
click
处理程序的复选框中；移除它
与问题无关，但您使用的是重复的
id
属性。它们需要在DOM中是唯一的
你的逻辑是颠倒的。您声明您希望红色边框仅在单击“购买”按钮时未选中两个复选框时显示

通过缓存复选框选择器并使用
toggleClass（）
，还可以使逻辑更加简洁。大概是这样的：


jQuery（函数（$）{
$（“#upsellyes”）。单击（函数（e）{
变量$terms=$（'.checkedterms'）；
$（“#需要术语”）.toggleClass（'invalid'，$terms.length！=$terms.filter（'：checked'）.length）；
});
});
。无效{
边框：1px纯红；
}
.核对条款{
位置：绝对位置；
}
标签{
显示：内联块！重要；
字体大小：正常！重要；
左边距：25px；
}

我读过。
*


我读过。
*







这里有几个问题：


在代码的开头有一个等式检查，它什么也不做
您已将
change
处理程序嵌套在按钮的
click
处理程序的复选框中；移除它
与问题无关，但您使用的是重复的
id
属性。它们需要在DOM中是唯一的
你的逻辑是颠倒的。您声明您希望红色边框仅在单击“购买”按钮时未选中两个复选框时显示

通过缓存复选框选择器并使用
toggleClass（）
，还可以使逻辑更加简洁。大概是这样的：


jQuery（函数（$）{
$（“#upsellyes”）。单击（函数（e）{
变量$terms=$（'.checkedterms'）；
$（“#需要术语”）.toggleClass（'invalid'，$terms.length！=$terms.filter（'：checked'）.length）；
});
});
。无效{
边框：1px纯红；
}
.核对条款{
位置：绝对位置；
}
标签{
显示：内联块！重要；
字体大小：正常！重要；
左边距：25px；
}

我读过。
*


我读过。
*







删除此行

$(".checkedterms").change(function(){ //remove
    //keep the code that's currently here
}); //remove

给你留下

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

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

$(".checkedterms").change(function(){ //remove
    //keep the code that's currently here
}); //remove

给你留下

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

代码未运行，因为您正在按钮上的事件侦听器内的复选框上设置事件侦听器。当您单击按钮时，javascript会在复选框上设置一个事件监听器，当它们的状态发生变化时触发该复选框
这一行是否应该在if语句中$（'.checkedterms:checked'）。长度==$（'.checkedterms'）。长度这里有点错误。在
中单击
处理程序，您正在将一个
已更改的
处理程序添加到
检查术语
。那没有任何意义。在值更改之前，该函数不会运行，而这肯定不是您想要的。这一行应该在if语句中吗$（'.checkedterms:checked'）。长度==$（'.checkedterms'）。长度这里有点错误。在
中单击
处理程序，您正在将一个
已更改的
处理程序添加到
检查术语
。那没有任何意义。在值更改之前，该函数不会运行，这当然不是你想要的。还有一些其他的问题，在这种情况下，
=
符号的数量不会有什么不同。还有一些其他的问题，在这种情况下，
=
符号的数量不会有什么不同。实际上，这些问题仍然不起作用，因为
if
表达式不正确。删除前导的
并使用
=。否则，一旦我发现了错误，它就会一直是错误的，我没有真正更仔细地检查代码的其余部分，如果代码还有其他问题，rory的回答可能更详细、更准确helpful@MattBurland是的，正如我在评论中提到的，在看到错误的事件侦听器之后，我没有检查代码的其余部分，我将使edit实际上仍然不起作用，因为
if
表达式不正确。删除前导的
并使用
=。否则，一旦我发现了错误，它就会一直是错误的，我没有真正更仔细地检查代码的其余部分，如果代码还有其他问题，rory的回答可能更详细、更准确helpful@MattBurland是的，正如我在评论中提到的，在看到错误事件之后，我没有检查代码的其余部分