分配单选按钮的标签，而不是价值

Question

考虑下面的单选按钮，以html：

<tr> 
    <td> Lighting </td> 
    <td> <label for="lighting1"> Off </label> 
     <input id = "lighting1" name="lighting" type="radio" value="0"> </td> 
    <td> <label for="lighting2"> Low </label> 
     <input id = "lighting2" name="lighting" type="radio" value="1"> </td> 
    <td> <label for="lighting3"> High </label> 
     <input id = "lighting3" name="lighting" type="radio" value="2"> </td> 
</tr> 

我需要将分配一个变量，而不是它的值单选按钮的标签，一个JavaScript语句，即“关”， '低'或'高'而不是'0'，'1'或'2'。当单选按钮被选中时。

看起来很简单直接，但无论我尝试什么，都无法实现。我还没有在论坛上找到任何工作答案。请允许我说明所有不可行的试验，并仅使用一行代码就能启发我。

Answer 1

可以使用input.value = newValue

function updateValues(){ 
 
    var radios = document.querySelectorAll('[name="lighting"]'); 
 
    for(var i = 0; i< radios.length; i++){ 
 
    var id = radios[i].getAttribute('id'); 
 
    radios[i].value = document.querySelector('label[for="'+id+'"]').textContent.trim() 
 
    } 
 
} 
 

 
function registerEvents(){ 
 
    var radios = document.querySelectorAll('[name="lighting"]'); 
 
    for(var i = 0; i< radios.length; i++) 
 
    radios[i].addEventListener("change", handleChange) 
 
} 
 

 
function handleChange(){ 
 
    console.log(this.value) 
 
} 
 

 
registerEvents();

<tr> 
 
    <td> Lighting </td> 
 
    <td> <label for="lighting1"> Off </label> 
 
    <input id="lighting1" name="lighting" type="radio" value="0"> </td> 
 
    <td> <label for="lighting2"> Low </label> 
 
    <input id="lighting2" name="lighting" type="radio" value="1"> </td> 
 
    <td> <label for="lighting3"> High </label> 
 
    <input id="lighting3" name="lighting" type="radio" value="2"> </td> 
 
</tr> 
 

 
<p id="selectedValues"></p> 
 

 
<button onclick="updateValues()" >Update Values</button>

Answer 2

var radioButtons = document.querySelectorAll("input[type='radio']"); 
for(var i = 0; i< radioButtons.length; i++) 
{ 
    radioButtons[i].addEventListener("click", (e)=>{ 
     var radioButton = e.target || e.srcElement; 
     var label = document.querySelector("label[for='" + radioButton.id + "'"); 
     alert(label.innerText.trim()); 
    }); 
} 

编辑取使用通用名和更新数值收音机：删除了我最初加入jQuery的片段。由于用户只是在寻找一个JavaScript解决方案，所以只保留这一点。