更改单选按钮时更改颜色答案

【问题标题】：Change color when radio button is changed更改单选按钮时更改颜色
【发布时间】：2014-05-27 10:35:41
【问题描述】：

jQuery:

$(function() 
{
    $(':radio[name="noir"]').click(function()
    {
        $('#h1color')
            .addClass('noir')
            .removeClass('vert')
            .removeClass('rouge')
            .html('Je suis noir !');
    });
    $(':radio[name="vert"]').click(function()
    {
        $('#h1color')
            .addClass('vert')
            .removeClass('noir')
            .removeClass('rouge')
            .html('Je suis vert !');
    });

    $(':radio[name="rouge"]').click(function()
    {
        $('#h1color')
            .addClass('rouge')
            .removeClass('vert')
            .removeClass('noir')
            .html('Je suis rouge !');
    }); 
});

HTML：

<form action="post">
    <input type="radio" name="color" value="noir"/>Noir <br/>
    <input type="radio" name="color" value="vert"/>Vert<br/>
    <input type="radio" name="color" value="rouge"/>Rouge<br/>
</form>
<h1 id="h1color">Je suis Noir !</h1>

但是当我检查收音机时，文本并没有改变颜色和字符串。

我的错误在哪里？！

【问题讨论】：

标签： jquery html radio checked

【解决方案1】：

你可以把它缩短为

$('input[type="radio"][name="color"]').on('change', function() {
    $('#h1color').removeClass().addClass(this.value).html('Je suis '+this.value);
});

FIDDLE

【讨论】：

【解决方案2】：

这样做：

$(function() {

    $(':radio[value="noir"]').click(function(){
        $('#h1color').addClass('noir').removeClass('vert').removeClass('rouge').html('Je suis noir !');
    });
    $(':radio[value="vert"]').click(function(){
        $('#h1color').addClass('vert').removeClass('noir').removeClass('rouge').html('Je suis vert !');
    });
    $(':radio[value="rouge"]').click(function(){
        $('#h1color').addClass('rouge').removeClass('vert').removeClass('noir').html('Je suis rouge !');
    }); 
});

您正在检查相同的名称属性。你必须检查价值

【讨论】：

谢谢，就是这个……^^
很高兴有帮助:)

【解决方案3】：

这将起作用：

$(function() {
    $("form").on("click", "input", function(e) {
        var $header = $("#h1color");
        if (e.target.type == "radio") {
            var $colour = $(this).val();
            $header.removeClass().addClass($colour).text("Je suis " + $colour);
        }
    });
});

DEMO

【讨论】：