为什么这种样式没有添加到我的单选按钮中?

发布于 2024-12-29 08:11:58 字数 688 浏览 0 评论 0原文

我在提交之前验证表单的一部分是否已完成,并尝试添加一个类,该类将以红色勾勒出单选按钮(如果尚未选择)。我正在触发警报,所以我知道它没有被检查,但样式无法设置。知道我缺少什么吗?

这是我当前的代码:

CSS:

.form_error {
    border-color: #ee5f5b;
}

JQuery:

        for (i=1;i<4;i++) {

            if (!$('input[name=answer'+i+']:checked').val()) {
                alert("Not checked");
                $("#question_answer"+i).addClass("form_error");
            }
        }

HTML:

<td>
    <input type="radio" id="question_answer1" name="answer1" value="1" >Yes
    <input type="radio" id="question_answer1" name="answer1" value="0" >No
</td> 

I'm validating that part of my form is complete before submission and trying to add a class that will outline the radio button in red if it hasn't been selected. I'm triggering the alert so I know it's not checked but the style fails to get set. Any idea what I'm missing?

Here is my current code:

CSS:

.form_error {
    border-color: #ee5f5b;
}

JQuery:

        for (i=1;i<4;i++) {

            if (!$('input[name=answer'+i+']:checked').val()) {
                alert("Not checked");
                $("#question_answer"+i).addClass("form_error");
            }
        }

HTML:

<td>
    <input type="radio" id="question_answer1" name="answer1" value="1" >Yes
    <input type="radio" id="question_answer1" name="answer1" value="0" >No
</td> 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

别再吹冷风 2025-01-05 08:11:58

问题可能是两个输入具有相同的 ID 属性吗?由于它们是单选按钮,因此它们可以共享名称,但元素绝不能共享 ID。

Could the issue be that the two inputs have the same ID attribute? As they are radio buttons it's ok for them to share a name but elements should never share an ID.

守不住的情 2025-01-05 08:11:58

确实如此,您只是无法分辨,因为大多数浏览器不会呈现带边框的单选按钮

It is, you just can't tell because most browsers don't render radio buttons with borders.

巷雨优美回忆 2025-01-05 08:11:58

正如其他人所说,这可能与重复的 id 值有关。但无论如何,使用两个不同的选择器选择相同的元素是没有意义的。一旦你弄清楚原来的问题,我建议尝试这样的事情:

for ( i = 1 ; i < 4 ; i++ ) {

  $( "input[name='answer" + i + "']" ).not( ":checked" ).toggleClass( "form_error", true );

}
// for

As others have stated, it may have to do with the duplicate id values. But there's no sense selecting the same elements using 2 different selectors anyway. Once you figure out the original problem, I suggest trying something like this:

for ( i = 1 ; i < 4 ; i++ ) {

  $( "input[name='answer" + i + "']" ).not( ":checked" ).toggleClass( "form_error", true );

}
// for
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文