Javascript 是否基于单选按钮选择显示选定阵列中的图像？

因此，我想使用javascript为给定的单选按钮选择显示不同的图像数组，但无法运行代码。使用jquery的解决方案也可以

<script language="javascript">


var surffamous = new Array;
surffamous[0] = "teahupoo.jpg"
surffamous[1] = "blacks.jpg"
surffamous[2] = "supertubes.jpg"
surffamous[3] = "pipeline.jpg"

var surfsocal = new Array;
surfsocal[0] = "lajolla.jpg"
surfsocal[1] = "oceanside.jpg"
surfsocal[2] = "delmar.jpg"
surfsocal[3] = "cardiff.jpg"

var surfcentralcal = new Array;
surfcentralcal[0] = "rincon.jpg"
surfcentralcal[1] = "leocarillo.jpg"
surfcentralcal[2] = "elcapitan.jpg"
surfcentralcal[3] = "hollister.jpg"

var=新数组；
SURFFAMITED[0]=“teahupoo.jpg”
冲浪名人[1]=“blacks.jpg”
SURFFINATIONG[2]=“supertubes.jpg”
SURFFINATIONG[3]=“pipeline.jpg”
var surfsocal=新数组；
surfsocal[0]=“lajolla.jpg”
surfsocal[1]=“oceanside.jpg”
surfsocal[2]=“delmar.jpg”
surfsocal[3]=“cardiff.jpg”
var surfcentralcal=新数组；
surfcentralcal[0]=“rincon.jpg”
surfcentralcal[1]=“leocarillo.jpg”
surfcentralcal[2]=“elcapitan.jpg”
surfcentralcal[3]=“hollister.jpg”

您想在哪里浏览？
功能检查（现场）{
var whichArray；
如果（spot.value==“南方”）{
whicharay=表面；
}
else if（spot.value==“中心”）{
whicharay=表面中心线；
}
else if（spot.value==“著名”）{
whicharay=著名的冲浪者；
}
显示图像（whichArray）；
}
功能显示图像（图像）{
对于（i=0；i您的代码没有运行，因为它抛出了一个错误：您缺少用于“关闭”检查函数的
}
标记

试试这个，我做了一些更改：


#图像img{
边缘：1米；
宽度：100px；
高度：100px；
}

你想去哪里探险

南加州
加利福尼亚中部
名胜古迹


//找到images div和所有单选按钮
var images=document.getElementById（'images'），
radioButtons=document.getElementsByName（'spot'）；
//使用[]而不是新数组（）
var=[]；
SURFFAMITED[0]=“teahupoo.jpg”
冲浪名人[1]=“blacks.jpg”
SURFFINATIONG[2]=“supertubes.jpg”
SURFFINATIONG[3]=“pipeline.jpg”
var surfsocal=[]；
surfsocal[0]=“lajolla.jpg”
surfsocal[1]=“oceanside.jpg”
surfsocal[2]=“delmar.jpg”
surfsocal[3]=“cardiff.jpg”
var-surfcentralcal=[]；
surfcentralcal[0]=“rincon.jpg”
surfcentralcal[1]=“leocarillo.jpg”
surfcentralcal[2]=“elcapitan.jpg”
surfcentralcal[3]=“hollister.jpg”
函数检查（）{
var图像，
fragment=document.createDocumentFragment（）；
对于（变量i=0；i<4；i++）{
//不要使用document.write
图像=新图像（）；
//“this”指单击的单选按钮
如果（this.id=='socal'）{
image.src=surfsocal[i]；
}else if（this.id=='central'）{
image.src=surfcentralcal[i]；
}else if（this.id===‘著名’）{
image.src=surf[i]；
}
//片段帮助您最小化
//直接DOM插入
片段。追加子对象（图像）；
}
images.innerHTML=''；
附加子对象（片段）；
}
//使用循环将侦听器连接到每个按钮
对于（var i=radioButtons.length；i--；）{
单选按钮[i].onchange=检查；
}
应该花更多的时间在这里格式化代码。还有什么问题/问题？是的，很抱歉第一次在这里提问，所以通过我进行初始格式化。现在看起来应该更好了！我只想显示一个基于单选按钮选择的数组（有三个选项）。你想在单击收音机或按下按钮时加载图像吗？最好在单击收音机时加载，尽管添加按钮不是不可能的。嘿，阿方索，这很有效，但我想知道是否有方法在图像出现时填充图像或隔开它们？是的，当然，你只需添加一些CSS。我已更新了answer，看看顶部的CSS片段，我刚刚添加了一个
margin
属性。如果您愿意，您还可以控制图像的宽度和高度（如果您希望图像保持原始大小，请删除这些属性）。
<form style="color: #2D5059">
<p>Where would you like to explore?</p< <br> <br>
<input type="radio" name="spot" id="socal" value="southern">Southern California
<input type="radio" name="spot" id="central" value="central">Central California
<input type="radio" name="spot" id="famous" value="famous">Famous Spots
</form>


<script language="javascript">
function check() {
for(i=0; i<4; i++){
if(document.getElementById('socal').checked) {
document.write('<img src="'+  surfsocal[i] +'"/> ' + '</a>');
}
else if(document.getElementById('central').checked) {
document.write('<img src="'+  surfcentralcal[i] +'"/> ' + '</a>');
}
else if(document.getElementById('famous').checked) {
document.write('<img src="'+  surffamous[i] +'"/> ' + '</a>');
}
}
</script>  

function check(spot) {

    var whichArray;
    if (spot.value == "southern") {
        whichArray = surfsocal;
    }
    else if (spot.value == "central") {
        whichArray = surfcentralcal;
    }
    else if (spot.value == "famous") {
        whichArray = surffamous;
    }
    DisplayImages(whichArray);
}
function DisplayImages(images) {
    for(i=0; i<images.length; i++) {
        document.write('<img src="'+  images[i] +'"/> ');
    }
}

<input type="radio" name="spot" id="socal" value="southern" onclick="check(this);">Southern California
<input type="radio" name="spot" id="central" value="central" onclick="check(this);">Central California
<input type="radio" name="spot" id="famous" value="famous" onclick="check(this);">Famous Spots