如何设置数组以便在不使用 jQuery 的情况下获取单选按钮值

Question

我在设置数组以获取单选按钮的值时遇到问题。这些是我表单中的单选按钮：

<form name="artistImages"> //This is the form tag

<legend> Gallery </legend>
         <input type="radio" name="artist" value="Z"><img src="zedd.png" height="82" width="68">
         <input type="radio" name="artist" value="T"><img src="taylorswift.jpg" height="82" width="68">
         <input type="radio" name="artist" value="P"><img src="pharrell.jpg" height="82" width="68">
         <input type="radio" name="artist" value="B"><img src="beyonce.jpg" height="82" width="68">
         <input type="radio" name="artist" value="D"><img src="drake.jpg" height="82" width="68">
         <input type="radio" name="artist" value="E"><img src="eminem.jpg" height="82" width="68">
         <input type="button" id="mybutton" value="GetValue" onClick="getRadioValue(radioArray)"/><br>

<input id="image" type="text" name="name" size="20">

这是 javascript

<script>
var radioArray = [document.forms.artistImages.artist];
function getRadioValue(radioArray){
var i
var text = document.getElementById('image').value;

for (i = 0; i < radioArray.length; i++){
    if(radioArray[i].checked) return radioArray[i].value;
    var text = radioArray[i].value;
    };
    };  
</script>

Answer 1

使用这个脚本：

<script>
        function getRadioValue(){
            if(document.getElementById("artist1").checked)
                document.getElementById("image").value  =   document.getElementById("artist1").value;
            if(document.getElementById("artist2").checked)
                document.getElementById("image").value  =   document.getElementById("artist2").value;
            if(document.getElementById("artist3").checked)
                document.getElementById("image").value  =   document.getElementById("artist3").value;
            if(document.getElementById("artist4").checked)
                document.getElementById("image").value  =   document.getElementById("artist4").value;
            if(document.getElementById("artist5").checked)
                document.getElementById("image").value  =   document.getElementById("artist5").value;
            if(document.getElementById("artist6").checked)
                document.getElementById("image").value  =   document.getElementById("artist6").value;
            };  
    </script>

和这个 html:

<form name="artistImages">
        <legend> Gallery </legend>
        <input type="radio" id="artist1" name="artist" value="Z"><img src="zedd.png" height="82" width="68">
        <input type="radio" id="artist2" name="artist" value="T"><img src="taylorswift.jpg" height="82" width="68">
        <input type="radio" id="artist3" name="artist" value="P"><img src="pharrell.jpg" height="82" width="68">
        <input type="radio" id="artist4" name="artist" value="B"><img src="beyonce.jpg" height="82" width="68">
        <input type="radio" id="artist5" name="artist" value="D"><img src="drake.jpg" height="82" width="68">
        <input type="radio" id="artist6" name="artist" value="E"><img src="eminem.jpg" height="82" width="68">
        <input type="button" id="mybutton" value="GetValue" onClick="getRadioValue();"/><br>

        <input id="image" type="text" name="name" size="20">
    </form>

Answer 2

另一个simplified/generic版本完成任务：

<script>
    function getRadioValue(){
        for (var i = 0; i < document.forms[0].length-2; i++){
            if(document.forms[0][i].checked)
                document.getElementById("image").value  =   (document.forms[0][i].value);
        };
    };  
</script>

和 HTML:

<form name="artistImages">
    <legend> Gallery </legend>

    <input type="radio" name="artist" value="Z"><img src="zedd.png" height="82" width="68">
    <input type="radio" name="artist" value="T"><img src="taylorswift.jpg" height="82" width="68">
    <input type="radio" name="artist" value="P"><img src="pharrell.jpg" height="82" width="68">
    <input type="radio" name="artist" value="B"><img src="beyonce.jpg" height="82" width="68">
    <input type="radio" name="artist" value="D"><img src="drake.jpg" height="82" width="68">
    <input type="radio" name="artist" value="E"><img src="eminem.jpg" height="82" width="68">
    <input type="button" id="mybutton" value="GetValue" onClick="getRadioValue();"/><br>

    <input id="image" type="text" name="name" size="20">
</form>

如何设置数组以便在不使用 jQuery 的情况下获取单选按钮值

How to set up an array in order to get radio button values without using jQuery

html

javascript

radio-button