如何获得一个单选按钮来更改 html 和 jquery 中的文本颜色？

Question

这是我无法弄清楚如何获取要由 jquery 读取的单选按钮的值，然后将其转换为将更改文本颜色的函数的代码。

HTML:

<span id="quotechange"> HEllloooooo </span>

<div id="mydiv">
                Color: 
                    <label class="color1"><input type="radio"  name="color" value="color1" checked="checked">Black</label>
                    <label class="color2"><input type="radio"  name="color" value="color2" >Purple</label>
                    <label class="color3"><input type="radio"  name="color" value="color3" >Orange</label>
                    <label class="color4"><input type="radio"  name="color" value="color4" >Red</label> <br>

                Style:
                    <label class="stylebold"><input type="checkbox" name="style1" value="stylebold" > Bold</label>
                    <label class="styleitalic"><input type="checkbox" name="style2" value="styleitalic" > Italic</label>
           </div>

CSS:

.color1 {
    color: black;
}
.color2 {
    color: purple;
}
.color3 {
    color: orange;
}
.color4 {
    color: red;
}

JS:

$('#mydiv input').click(colorClick($('input[name=color]:checked', '#mydiv').val()));


function colorClick(color) {
    if(color == "color1") {
        $("#quotechange").removeClass("color2");
        $("#quotechange").removeClass("color3");
        $("#quotechange").removeClass("color4");
        $("#quotechange").addClass("color1");
    }
    else if(color == "color2"){
        $("#quotechange").removeClass("color1");
        $("#quotechange").removeClass("color3");
        $("#quotechange").removeClass("color4");
        $("#quotechange").addClass("color2");
    }
    else if(color == "color3"){
        $("#quotechange").removeClass("color1");
        $("#quotechange").removeClass("color2");
        $("#quotechange").removeClass("color4");
        $("#quotechange").addClass("color3");
    }
    else if(color == "color4"){
        $("#quotechange").removeClass("color1");
        $("#quotechange").removeClass("color3");
        $("#quotechange").removeClass("color2");
        $("#quotechange").addClass("color4");
    }
}

Answer 1

你可以简单的使用$(this).val()

$('#mydiv input:radio').on('change', function() {
    $('#test').attr('class', '').addClass($(this).val()); 
});


$('#mydiv input:checkbox').on('change', function() {
    $('#test').addClass($(this).val()); 
    //or if you use this, it will take care when unchecked
    //$('#test').toggleClass($(this).val()); 
});

演示：https://jsfiddle.net/erkaner/RhnvU/3908/

更新

问题已解决：When bold and/or italic are checked and a new color is picked the bold and italic remain checked but the value gets reset for them

演示：https://jsfiddle.net/erkaner/RhnvU/3910/

$('#mydiv input:radio').on('change', function () {    
    var checkedboxes = $('#mydiv input:checkbox:checked').map(function(){
      return $(this).val();
    }).get(); 

    $('#test').attr('class', checkedboxes.join(' ')).addClass($(this).val());
});

Answer 2

$('#mydiv input').click(function(){
    colorClick($('input[name=color]:checked', '#mydiv').val()) 
});

The syntax of your click function was wrong except that what you did was right and you could use $(this) instead of $('input[name=color]:checked', '#mydiv')

DEMO Fiddle

如何获得一个单选按钮来更改 html 和 jquery 中的文本颜色？

How do you get a Radio Button to change text color in html with jquery?

html

javascript

css

jquery

radio-button