我有多組單選按鈕，我想單擊時改變顏色。我使用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>

我porblem是，如果我改變name顏色不會改變了，如果我保持name一樣，那麼所有4個計爲一個組。

編輯我想說清楚，我的代碼已完美工作。我試圖弄清楚的是如何讓顏色變化不會被卡在name屬性中。

來源

2013-04-23 Dev-Ria

你有'document.forms [「form」] [「tt」]'hardcoded英寸，這也需要是動態的，如果你想分組他們 – Ian 2013-04-23 14:31:39

你也給** 5 **東西相同的'id'。所有'id's必須是唯一的 – Ian 2013-04-23 14:32:29

和''應該是'' – Ian 2013-04-23 14:32:56

使用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

來源

2013-04-23 15:27:19

這工作得很好，但我覺得我有enhzflep的答案更靈活。 – 2013-04-23 16:27:52

我是否需要特殊的東西才能在瀏覽器中完成此項工作？導致複製和粘貼似乎不能從小提琴中工作。 – 2013-04-23 17:11:20

@ Dev-Ria你需要包含jQuery，這就是所有:) – 2013-04-23 17:15:56

此代碼將這樣的伎倆。我沒有解決前面提到的關於使文本「tt」動態的問題 - 我將它們硬編碼爲gp1和gp2。每個單選按鈕現在都有自己的ID，我也將每個單獨的標籤放置在標籤標籤內 - 這樣可以實現樣式。所有樣式都是通過定位標籤標籤完成的。我還附加了使用addEventListener處理onclick事件的函數，因爲這樣做允許我們訪問this變量 - 它指向觸發click事件的元素。（它還允許其他未使用的功能 - 例如單個元素上的單個事件的多個處理程序以及選擇性地刪除所述處理程序的能力）

我也更改了change_it函數。現在執行以下操作：

獲取單選按鈕
的name屬性獲取具有相同名稱的元素列表（同一單選按鈕組中的項目）
設定該類該<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-23 15:29:57 enhzflep

幹得好！這完美的作品！我只有一個問題。是否可以使用'tr'而不是'Label'，因爲我想讓整行的顏色發生變化。此外，我需要使用兩種不同的顏色紅色爲壞，綠色爲好。這可能嗎？ – 2013-04-23 16:23:36

謝謝，你是最受歡迎的。當然，你可以使用td（radio btn的父節點）或tr（radio btn的父節點的父節點）。爲了獲得不同的顏色，你可能希望使用addClass函數 - 使用單選按鈕的'value' - 然後你會得到'class ='選中Bad''和'class ='選中Good'或其他變體，適合您的需求。然後你可以用'td.checked.Good'，'td.checked.Bad'（或者tr等價物） – enhzflep 2013-04-23 17:11:22

如何通過點擊單選按鈕改變顏色，但使用值

回答

Working Fiddle

相關問題