2017-10-09 66 views
0

如何從下面的HTML代碼示例中使用JavaScript獲取值?如何訪問JavaScript的無線電輸入值?

<input type="radio" name="question1" value=1> Choose me <br/> 
<input type="radio" name="question1" value=2> Or me! <br/> 

我可以用這個嗎?我該如何改變它,如果我有3組無線電輸入,JavaScript可以添加用戶輸入的值?

function myFunction() { 
var x = document.getElementsByTagName("input")[0].getAttribute("value"); 
document.getElementById("demo").innerHTML = x; 

回答

0

const radios = document.querySelectorAll('input[name=question1]'); 
 

 
radios.forEach((radio)=>{ 
 
    radio.addEventListener('change',(e)=>{ 
 
    document.getElementById("demo").innerHTML = e.target.value; 
 
    }); 
 
});
<input type="radio" name="question1" value=1> Choose me <br/> 
 
<input type="radio" name="question1" value=2> Or me! <br/> 
 
<p id="demo"></p>

0

function getValues() { 
 

 
var x = document.getElementById("myInput").value; 
 
document.getElementById("feedback_1").innerHTML = x; 
 

 
var y = document.querySelector('input[name="group"]:checked').value; 
 

 
document.getElementById("feedback_2").innerHTML = y; 
 

 
};
<h3>Input</h3> 
 
<input type="radio" value="First value" name="single" id="myInput" checked>1</input> 
 
<hr> 
 
<input type="radio" value="1" name="group">1</input> 
 
<input type="radio" value="2" name="group">2</input> 
 
<input type="radio" value="3" name="group" checked>3</input> 
 

 
<p><button onclick="getValues();">Get values</button></p> 
 

 
<h3>Your selection</h3> 
 
<p id="feedback_1"></p> 
 
<p id="feedback_2"></p>

相關問題