如何使jQuery识别单选按钮更改

How to make jQuery recognize radiobutton change

本文关键字：单选按钮 识别 何使 jQuery      更新时间：2023-09-26

我有两个单选按钮，第一个使文本变为红色，另一个使文本变为黄色。 但我不能让它变成蓝色。 请帮忙谢谢。

解决方案：http://jsfiddle.net/h6ye7/17/ 

<form>
    Option 1<input type="radio" name="opt" class="radio1" value="Option 1" />
    Option 2<input type="radio" name="opt" class="radio1" value="Option 2" />
</form>
<div class="text">sad dsffsadf sdsdf sfadfsd</div>

$(document).ready(function(){
    $('input[type=radio]').change(function(){
        if($('.radio1').is(':checked'))
        {
            $('.text').css('background-color', 'red');
        }
        else
        {
            $('.text').css('background-color', 'yellow');
        }
    });
});

.radio1选择两个无线电输入！

有几种选择：

  • 分配 ID

  • 使用 .eq（）：

    if ($(".radio1").eq(0).is(':checked'))

    → jsFiddle

  • 使用:first 

    if ($(".radio1:first").is(':checked'))

    → jsFiddle

  • 如果你真的愿意，你也可以分配不同的类（我不推荐这种方法，原因很简单，在这种情况下使用 ID 而不是类！

    .HTML：

    Option 1<input type="radio" name="opt" class="radio1" value="Option 1" />
Option 2<input type="radio" name="opt" class="radio2" value="Option 2" />

    JS（与开始时相同）：

    if ($(".radio1").is(':checked'))

    → jsFiddle

您可以使用:first来执行此操作：

$('input[type=radio]').change(function(){
    if($('.radio1:first').is(':checked'))
    {
        $('.text').css('background-color', 'red');
    }
    else
    {
        $('.text').css('background-color', 'yellow');
    }
});

演示小提琴

我为第二个单选按钮.radio2提供了一个不同的类，这解决了它。

http://jsfiddle.net/h6ye7/17/ 

<form>
    Option 1<input type="radio" name="opt" class="radio1" value="Option 1" />
    Option 2<input type="radio" name="opt" class="radio2" value="Option 2" />
</form>
相关文章：