使用單選按鈕更改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