分配单选按钮的标签而不是值(Assign radio button's label instead of value)

 您可以使用通用名称获取收音机，并使用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>
 
 
 
 

You can fetch radios using common name and update values using 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>