Change color when radio button is changed

Question

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>

But when I check a radio, the text doesn't change color and string.

Where is my error ?!

Answer 1

Do this:

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

You were checking for name attribute which was same. You have to check for value