Working Fiddle

Question

我有多组单选按钮，我想在点击时更改颜色。我正在使用name来更改颜色，但是当所有单选按钮的名称相似时，它将被计为一组。我需要将它们分开。

我的代码：

function getInputValue() {
  var radioObj = document.forms["form"]["tt"];
  for (var i=0; i<radioObj.length; i++) {
    if (radioObj[i].checked)
      return radioObj[i].value;
  }
  alert("No radio button was selected.")
}

function change_it(id) {
  var a = getInputValue();
  if(a=="Bad") {
    document.getElementById(id).style.backgroundColor = "#FFBFBF";
    return false;
  } else if(a=="Good") {
    document.getElementById(id).style.backgroundColor = "#F0FFF0";
    return false;
  }
}

<table>
<tr  id="<?php echo $row['id'];?>">
<td>
 It changes the color in here.
</td>
</tr>
</table>

<form action="#" method="get" name="form">
Group 1
<input type="radio" name="tt" id="1" onclick="change_it();" value="Bad" />Bad </input>
<input type="radio" name="tt" id="1" onclick="change_it();" value="Good" />Good</input>
Group 2
<input type="radio" name="tt" id="2" onclick="change_it();" value="Bad" />Bad </input>
<input type="radio" name="tt" id="2" onclick="change_it();" value="Good" />Good</input>
</form>

我的问题是如果我改变name颜色不再改变，如果我保持name相同，则所有4个都被计为一组。

修改我想说清楚我的代码完美无缺。我想弄清楚的是如何使颜色变化不会妨碍使用name属性。

Answer 1

使用class对单选按钮进行分组，并将要更改的td设为同一类。例如：

<table>
    <tbody>
        <tr>
            <td class="group1">Change me!</td>
        </tr>
        <tr>
            <td class="group2">Change me!</td> <!-- This won't be changed in the below code -->
        </tr>
    </tbody>
</table>

<input type="radio" class="group1" />

jQuery的：

   $('input[type="radio"]').on('click', function(){
    var className = "td." + $(this).attr("class");
    $(className).css( "color", "red" );
    });

Working Fiddle

Answer 2

这段代码可以解决问题。我没有解决前面提到的问题，关于使文本'tt'动态 - 我把它们硬编码为gp1和gp2。每个单选按钮现在都有自己的ID，我还将每个标签放在一个标签标签内 - 这样可以实现样式化。所有样式都是通过定位Label标签完成的。我还附加了使用addEventListener处理onclick事件的函数，因为这样做允许我们访问this变量 - 它指向触发click事件的元素。（它还允许其他未使用的功能 - 例如单个元素上的单个事件的多个处理程序以及选择性地删除所述处理程序的能力）

我也改变了change_it函数。它现在执行以下操作：

获取单选按钮的名称属性
获取具有相同名称的元素列表（项目相同单选按钮组）
设置包含所点击的<label>标记的className 收音机按钮和其他组中的项目

<强>代码

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    var index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function addClass(element, newStr)
{
    var index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
}

function removeClass(element, newStr)
{
    var index=element.className.indexOf(newStr);
    if (index != 0)
        newStr = ' '+newStr;
    element.className = element.className.replace(newStr, '');
}

function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    var inputList = document.querySelectorAll("input[type='radio']");
    var i, n = inputList.length;
    for (i=0; i<n; i++)
    {
        inputList[i].addEventListener('click', change_it, false);
    }
}

function change_it()
{
    var grpName = this.getAttribute('name');
    var otherElementsInGroup = document.getElementsByName(grpName);

    forEachNode(otherElementsInGroup, nodeItemFunc);

    function nodeItemFunc(element, index, list)
    {
        if (element.checked)
            addClass(element.parentNode, 'checked');
        else
            removeClass(element.parentNode, 'checked');
    }
}

</script>
<style>
label.checked
{
    background: #fda;
}
</style>
</head>
<body>
    <form action="#" method="get" name="form">
    Group 1
    <label>Bad<input type="radio" name="gp1" id="rb1" value="Bad" /></label>
    <label>Good<input type="radio" name="gp1" id="rb2" value="Good" /></label>
    <br>
    Group 2
    <label>Bad<input type="radio" name="gp2" id="rb3" value="Bad" /></label>
    <label>Good<input type="radio" name="gp2" id="rb4" value="Good" /></label>
    </form>
</body>
</html>

如何在单击单选按钮但使用值时更改颜色

2 个答案:

Working Fiddle