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

Question

I have multiple groups of radio buttons that I want to change color upon being clicked. 我有多组单选按钮，我想在点击时改变颜色。 I am using name to change color but when the name of all radio buttons are similar it is counted as one group. 我使用name来改变颜色但是当所有单选按钮的名称相似时，它被计为一组。 I need to split them up. 我需要将它们分开。

my code : 我的代码：

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>

my porblem is if I change the name the colors wont change anymore if I keep the name the same then all 4 are counted as one group. 我的问题是，如果我更改name ，颜色将不再改变，如果我保持name相同，那么所有4个被计为一组。

EDIT I want to make it clear that the code I have works perfectly. 编辑我想说清楚我的代码完美无缺。 What I am trying to figure out is how to make it so that the color change is not stuck to using name attribute. 我想弄清楚的是如何使颜色变化不使用name属性。

Answer 1

Use a class to group the radio buttons, and give the td that you want to be changed the same class. 使用class对单选按钮进行分组，并将要更改的td设置为相同的类。 For example: 例如：

<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: jQuery的：

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

Working Fiddle 工作小提琴

Answer 2

This code will do the trick. 这段代码可以解决问题。 I've not addressed the problem previously mentioned, regarding making the text 'tt' dynamic - I've hard-coded them as gp1 and gp2. 我没有解决前面提到的问题，关于使文本'tt'动态 - 我把它们硬编码为gp1和gp2。 Each of the radio buttons now have their own id, I've also put the label for each one inside a label tag - this enables styling. 每个单选按钮现在都有自己的ID，我还将每个标签放在一个标签标签内 - 这样可以实现样式化。 All styling is done by targeting the Label tags. 所有样式都是通过定位Label标签完成的。 I've also attached the function that will handle the onclick event using addEventListener, since doing so allows us access to the this variable - it points to the element that triggered the click event. 我还附加了使用addEventListener处理onclick事件的函数，因为这样做允许我们访问this变量 - 它指向触发click事件的元素。 (it also allows other, unused functionality - such as multiple handlers for a single event on a single element and the ability to selectively remove said handlers) （它还允许其他未使用的功能 - 例如单个元素上的单个事件的多个处理程序以及选择性地删除所述处理程序的能力）

I've also changed the change_it function. 我也改变了change_it函数。 It now does the following: 它现在执行以下操作：

Get the name attribute of the radio button 获取单选按钮的name属性
Get the list of elements that have the same name (items in same radio-button group) 获取具有相同名称的元素列表（相同单选按钮组中的项目）
Set the className of the <label> tag that encloses the clicked radio-button and other items in it's group 设置<label>标记的className，该标记包含单击的单选按钮以及其组中的其他项

Code 码

<!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 个解决方案

解决方案1
1 已采纳 2013-04-23 15:27:19

Working Fiddle 工作小提琴

解决方案2
1 2013-04-23 15:29:57

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-04-23 15:27:19

Working Fiddle 工作小提琴

解决方案2 1 2013-04-23 15:29:57

解决方案1
1 已采纳 2013-04-23 15:27:19

解决方案2
1 2013-04-23 15:29:57