从单选按钮传递变量

pass a variable from a radio button

本文关键字：变量 单选按钮      更新时间：2023-09-26

我正在尝试将变量从单选按钮传递到javascript链接中的变量。我无法将变量"testVar"传递给链接，该变量位于已检查单选按钮的 for 循环检查中。我很困惑，这是完整的代码：

 <form>
    <label>Priority 1</label>
    <input type="radio" id="priority" name="priorityN" onclick="getResults();" value="prior1"  />
    <label>Priority 2</label>
    <input type="radio" id="priority" name="priorityN" onclick="getResults();" value="prior2"  />
</form>
<br /><br />
<div id="myLink"></div>
<script>
var testVar = '';
function getResults() {
var radios = document.getElementsByName("priorityN");
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        testVar = (radios[i].value);
    //  alert(radios[i].value);
        break;
    }
}
}
document.getElementById("myLink").innerHTML = '<a href='"' + 'www.example.com?pri=' + testVar + ''" onclick='"$(this).modal({width:880, height:460}).open(); return false;'" >' + 'My Modal Link' + "</a>";
</script>

观看现场演示

根据我的评论，您可以进行一些更改。

  1. id属性应该是唯一的。您可以使用类名而不是id。

    <form>
    <label>Priority 1</label>
    <input type="radio" class="priority" name="priorityN" onclick="getResults();" value="prior1" />
    <label>Priority 2</label>
    <input type="radio" class="priority" name="priorityN" onclick="getResults();" value="prior2" />
</form>

  2. 如果要在每次按下不同的单选按钮时重新生成链接，则需要将其移动到getResults功能内。否则，它将使用当前初始值 testVar 生成，这是一个空字符串。

    function getResults() {
    var testVar;
    var radios = document.getElementsByName("priorityN");
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            testVar = (radios[i].value);
            document.getElementById("myLink").innerHTML = '<a href='"' + 'www.example.com?pri=' + testVar + ''" onclick='"$(this).modal({width:880, height:460}).open(); return false;'" >' + 'My Modal Link' + "</a>";
            break;
        }
    }
}
我可以使用

querySelector的现代浏览器，忘记循环：

function getResults() {
  var checked = document.querySelector('[name="priorityN"]:checked'),
      link = document.querySelector('#myLink');
  link.innerHTML = '<a href="...'+ checked.value +'">...</a>';
}
相关文章：