0

我有多组单选按钮，我想在单击时更改颜色。我正在使用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属性上。

4

2 回答 2

1

使用 aclass对单选按钮进行分组，并将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" );
    });

工作小提琴

于 2013-04-23T15:27:19.530 回答
1

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

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

  • 获取单选按钮的名称属性
  • 获取具有相同名称的元素列表（相同单选按钮组中的项目）
  • 设置<label>包含单击的单选按钮及其组中其他项目的标签的类名

代码

<!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>
于 2013-04-23T15:29:57.720 回答