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

您可以try this（假设除此之外没有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 = '';
            }
        }
    }
};

将此代码放在</body>标记之间的<script>标记之前，如

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

此外，您可以check this使用不同的方法注册活动。

更新：

querySelectorAll无法在IE-6中使用，因此您可以尝试使用this alternative solution IE-6来发挥作用。另外，如果您使用jQuery（将<head>中的代码放在<script>之间），则可以使用this example，如果是jQuery，则必须添加jQuery首先在<head>部分的{{1}}部分中添加{{1}}脚本。

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

2 个答案: