javascript - 从单选按钮传递变量

Question

我试图将变量从单选按钮传递给 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>

Answer 1

SEE LIVE DEMO

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

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;
           }
       }
   }
   

Answer 2

您可以使用现代浏览器querySelector并忘记循环：

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