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语句，它会在变量上分配单选按钮的标签而不是其值，即＆＃39;关闭＆＃39;＆＃39;低＆＃39;或者＆＃39;高＆＃39;而不是＆＃39; 0＆＃39;，＆＃39; 1＆＃39;或＆＃39; 2＆＃39;。选中单选按钮时。

看起来如此简单明了但无论我尝试什么，我都无法实现它。我还没有在论坛上找到任何有效的答案。请告诉我所有不可行的试验，并用一行代码启发我。

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解决方案，因此单独保留。

指定单选按钮的标签而不是值

2 个答案: