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

Question

我有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等变为绿色。

Answer 1

一种常见的技术是使用数据属性在元素之间创建关系。 在您的情况下，您可以在每个输入/单选按钮上放置一个属性，该属性引用您要影响的元素的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)');
});

Answer 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 （将代码放在<head> <script> <head>之间的<script> ），您可以使用此示例，如果是jQuery ，您必须首先在<head>部分中添加jQuery脚本。

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

问题描述

2 个解决方案

解决方案1
2 2013-11-18 05:34:40

解决方案2
2 已采纳 2013-11-18 06:15:25

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

问题描述

2 个解决方案

解决方案1 2 2013-11-18 05:34:40

解决方案2 2 已采纳 2013-11-18 06:15:25

解决方案1
2 2013-11-18 05:34:40

解决方案2
2 已采纳 2013-11-18 06:15:25