使用单选按钮更改 HTML 元素的颜色

Changing color of HTML element using radio button

本文关键字：元素 颜色 HTML 单选按钮      更新时间：2023-09-26

我有 10 组带有两个选项的单选按钮，每组由一个<div>分隔。

<div id = "radio1">
    <p>Do you like to walk?</p>
    <input type="radio" value="a" name="radgrp1"/> Yes <br />
    <input type="radio" value="b" name="radgrp1"/> No <br /> 
</div>
<div id = "radio2">
    <p>Would you prefer to walk without effort?</p>
    <input type="radio" value="a" name="radgrp2"/> Yes <br />
    <input type="radio" value="b" name="radgrp2"/> No <br /> 
</div>

然后我有 10 个指向每个组的标签。 

 <a id ="a1" href="#radio1">Goto 1</a>
 <a id ="a1" href="#radio2">Goto 2</a>

我希望实现的是用户单击"是"选项的那一刻，相应标签的颜色，即Goto 1，Goto 2等变为绿色。

你可以试试这个（假设除了这个之外没有document.body.onclick事件处理程序）

var radios = document.querySelectorAll('input[name^=radgrp]');
document.body.onclick = function(e){
    var evt = e || window.event, target = evt.target || evt.srcElement;
    if(target.name) {
        var prefix = target.name.substr(0, 6), suffix = target.name.substr(6);
        if(prefix && prefix == 'radgrp') {
            if(target.value == 'a' ) {
                document.getElementById('a' + suffix).style.color = 'green';
            }
            else {
                document.getElementById('a' + suffix).style.color = '';
            }
        }
    }
};

将此代码放在<script>标签之间的结束</body>标签之前，例如

<script type='text/javascript'> // code goes here </script>

此外，您可以检查此设置以使用不同的方法注册事件。

更新：

querySelectorAll在IE-6不起作用，因此您可以尝试这种替代解决方案以使IE-6正常工作。另外，如果你使用jQuery（把代码放在<script>之间的<head>），你可以使用这个例子，如果是jQuery，你必须首先在<head>部分添加jQuery脚本。

一种常见的技术是使用数据属性在元素之间创建关系。在您的情况下，您可以在每个输入/单选按钮上放置一个属性，该属性引用要影响的元素的 id。

<input type="radio" value="a" name="radgrp1" data-target="a1" /> Yes <br />

然后使用一些jQuery你可以这样做：

$('input[type="radio"]').change(function(){
    var id = $(this).attr('data-target');
    $('#' + id).css('background-color', 'rgb(255, 255, 255)');
});
相关文章：