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

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

php javascript html

Php 如何在单击单选按钮但使用值时更改颜色,php,javascript,html,Php,Javascript,Html,我有多组单选按钮，我想在单击时更改颜色。我正在使用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

我有多组单选按钮，我想在单击时更改颜色。我正在使用

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>

函数getInputValue（）{ var radioObj=document.forms[“form”][“tt”]；

对于（var i=0；i使用

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" />

这段代码就可以了。我没有解决前面提到的关于使文本“tt”动态化的问题-我已经将它们硬编码为gp1和gp2。每个单选按钮现在都有自己的id，我还将每个单选按钮的标签放在标签标签内-这启用了样式。所有样式都是通过针对标签标签来完成的。我已经完成了o附加了将使用addEventListener处理onclick事件的函数，因为这样做允许我们访问

此

变量-它指向触发click事件的元素。（它还允许其他未使用的功能，例如单个元素上单个事件的多个处理程序，以及选择性删除所述处理程序的能力）

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

获取单选按钮的name属性
获取具有相同名称的元素列表（相同名称中的项）单选按钮组）
设置包含所单击对象的
标记的类名单选按钮及其组中的其他项

代码

<!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>


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
函数toggleClass（元素，newStr）
{
var index=element.className.indexOf（newStr）；
如果（索引==-1）
element.className+=''+newStr；
其他的
{
如果（索引！=0）
newStr=''+newStr；
element.className=element.className.replace（newStr“”）；
}
}
函数addClass（元素，newStr）
{
var index=element.className.indexOf（newStr）；
如果（索引==-1）
element.className+=''+newStr；
}
函数removeClass（元素，newStr）
{
var index=element.className.indexOf（newStr）；
如果（索引！=0）
newStr=''+newStr；
element.className=element.className.replace（newStr“”）；
}
函数forEachNode（节点列表，func）
{
变量i，n=节点列表长度；
对于（i=0；i您有document.forms[“form”][“tt”]
硬编码。这也需要是动态的，如果你想对它们进行分组，你也会给出5个相同的id
。所有id
s都必须是唯一的，
应该是
，并且你所有的单选按钮都有相同的值
我如何制作文档。表单[“表单”][tt]
dynamic？id在使用php的while循环中，因此它们以两个一组的方式输出，但id不同。很抱歉，我没有提到这一点。关于输入，您也有权利。但是它不需要
来关闭吗？做得好！！这很好！！我只有一个问题。是否可以使用tr
而不是标签
来关闭因为我想更改整行的颜色。我还需要使用两种不同的颜色，红色表示坏，绿色表示好。这可能吗？谢谢，非常欢迎。当然，您可以使用td（无线btn的父级）或tr（无线btn的父级）。为了获得不同的颜色，您可能希望使用addClass功能—使用单选按钮的值
—然后您将获得class='checked Bad'
和class='checked Good'
或其他适合您需要的变体。然后您可以使用td.checked.Good
，td.checked.Bad>作为目标
（或tr等价物）这同样有效，但我觉得enhzflep的回答更灵活。我是否需要一些特殊的东西才能在浏览器中工作？因为从fiddle复制和粘贴似乎不起作用。@Dev Ria您需要包括jQuery，仅此而已：）@Dev Ria您可以通过将snippet:
放在您的标记中来实现这一点。我缺少一个库，但即使输入它，我也无法让它运行。这是我使用的。知道我做错了什么吗？
<!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>