Question

我有单选按钮如下：

<input type='radio' name='ans' value='0'> Dog
<input type='radio' name='ans' value='1'> Horse
<input type='radio' name='ans' value='2'> Cat
<input type='radio' name='ans' value='3'> Camel

<input type="button" value="Change Color" onclick="changeColor()" />

当我点击按钮时，我希望某个单选按钮文本变为绿色。
例如。如果正确答案（值='2'）是Cat，那么Cat文本应该变为绿色。

这是一个不完整的功能 - 我想我错过了根据值选择单选按钮的部分：

var changeColor = function()
    {
        $("input[name=ans]").css('color', 'green');
    }

Answer 1

您的工作代码：

<form id="radioForm">
    <label><input type="radio" name="ans" value="0">Dog</label>
    <label><input type="radio" name="ans" value="1">Horse</label>
    <label><input type="radio" name="ans" value="2">Cat</label>
    <label><input type="radio" name="ans" value="3">Camel</label>
    <input type="button" id="changeColor" value="Change Color" />
</form>
<script>
    $(document).on('click','#changeColor',function(){
      var $radio = $(this).closest('form').find('input[type="radio"]:checked');
      $('label').css('color','#000');
      $radio.closest('label') .css('color','green');
    });
</script>

Answer 2

您可能更容易在输入中使用标签。

如下所示：

HTML

<label class='0'>Dog</label>
    <input type='radio' name='ans' class='checkbox-option' value='0'>

JQuery的

if ( $('.checkbox-option').prop('checked') )
{ 
    var className = $(this).val();
    $('.'+className).css('color', 'green');
}

我还没有对此进行测试，但我会想象一下类似于此的东西。

Answer 3

您想要将所有其他颜色选择的颜色更改为黑色。试试这个

＆＃13;

function changeColor ()
    {	
        $("input[name=ans]").next().css('color', 'black')
        $("input[name=ans]:checked").next().css('color', 'green');
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type='radio' name='ans' value='0'> <label>Dog</label>
<input type='radio' name='ans' value='1'> <label>Horse</label>
<input type='radio' name='ans' value='2'> <label>Cat</label>
<input type='radio' name='ans' value='3'> <label>Camel</label>


<input type="button" value="Change Color" onclick="changeColor()" />

＆＃13;

Answer 4

Jasper，请您查看以下链接：

fiddle

ORA-06550: line 9, column 6:
PLS-00306: wrong number or types of arguments in call to 'MEMBER OF'
ORA-06550: line 9, column 3:
PL/SQL: Statement ignored

我为此创建了jsfiddle。希望这会有所帮助。

Answer 5

设置页面样式的正确方法是使用CSS。在JS中编写代码是不好的做法。

HTML

<input type='radio' name='ans' value='0' id='ans-dog'/>
<label for='ans-dog'>Dog</label>
<input type='radio' name='ans' value='1' id='ans-horse'/>
<label for='ans-horse'>Horse</label>
<input type='radio' name='ans' value='2' id='ans-cat'/>
<label for='ans-cat'>Cat</label>
<input type='radio' name='ans' value='3' id='ans-camel'/>
<label for='ans-camel'>Camel</label>

CSS

input[type="radio"] + label {
    color: black;
}

input[type="radio"]:checked + label {
    color: green;
}

Jquery - 更改单选按钮文本颜色

5 个答案: