大佬教程收集整理的这篇文章主要介绍了javascript – 需要单击图像映射区域以选择相应的单选按钮，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在下面我设置了三行单选按钮,每行有三个按钮,用于捕获他们从图像映射中选择的顺序.我想要做的是当单击图像映射1以点击第一行上的第一个单选按钮,然后从那里记录选择的顺序,以便当图像映射的下一个区域是单击,说区域2,单击第二行上的第二个按钮.如果点击两次,我还需要它们是不可选择的.我将在后一时间添加悬停效果以使其直观.
到目前为止,我已经得到了点击图像地图区域的地方将从与所选图像地图对应的第一行中选择单选按钮,比如他们点击区域3,然后选择第一行上的第三个单选按钮.然而,如果他们然后从图像映射中单击区域2,则选择第一行上的第二个按钮,我需要它做的是选择第二行上的第二个按钮.我希望这是有道理的.基本上我们试图用单选按钮记录他们选择的顺序. 3个图像映射区域,每行三个按钮,三行.
这就是我到目前为止所拥有的.
<script type="text/javascript">
var order = 0;
function retainOrder(stuff) {
var findMe = "CUST_" + stuff;
var orgLoc = document.getElementById(findME);
if (orgLoc.checked)
{
order=order + 1;
var new@R_489_10495@ng = "RADIO" + radio + "_" + stuff;
document.getElementById(new@R_489_10495@ng).checked = true;
}
else {
var another@R_489_10495@ng = "RADIO" + radio + "_" + stuff;
document.getElementById(another@R_489_10495@ng).checked = false;
order=order-1;
}
}
</script>
</head>
<body>
<div id="imagemap"><img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" onclick="document.getElementById('radio0').checked = true">
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1 "name="CUST:1" value="1" %CUST:1% onclick="document.getElementById('radio0').checked = true"/>
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" name="CUST:2" %CUST:2% onclick="document.getElementById('radio1').checked = true"/>
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" %CUST:3% name="CUST:3" onclick="document.getElementById('radio2').checked = true"/>
</map>
<p>
<div>
<input type="radio" name="radios" id="radio0" value="0" />
<input type="radio" name="radios" id="radio1" value="1" />
<input type="radio" name="radios" id="radio2" value="2" />
</div>
<div>
<input type="radio" name="radios" id="radio3" value="0" />
<input type="radio" name="radios" id="radio4" value="1" />
<input type="radio" name="radios" id="radio5" value="2" />
</div>
<div>
<input type="radio" name="radios" id="radio6" value="0" />
<input type="radio" name="radios" id="radio7" value="1" />
<input type="radio" name="radios" id="radio8" value="2" />
</div>
如果有人能帮助我,我会非常感激.谢谢.
window.onload = function () { var order = 0,checkedAreas = [],mapClick = function (E) { var m,n,start,buttonnumber = e.target.id.split('_').pop(),buttonName = 'radios' + buttonnumber,buttons = document.getElementsByName(buttonName); if (!checkedAreas[buttonnumber]) { buttons[order].checked = true; order += 1; checkedAreas[buttonnumber] = order; } else { start = checkedAreas[buttonnumber]; checkedAreas[buttonnumber] = 0; buttons[start - 1].checked = false; for (m = 0; m < 3; m++) { buttons = document.getElementsByName('radios' + m); for (n = start; n < 3; n++) { if (buttons[n].checked) { checkedAreas[m] = checkedAreas[m] - 1; buttons[n].checked = false; buttons[n - 1].checked = true; break; } } } order -= 1; } }; document.getElementById('Map').addEventListener('click',mapClick); };
我在评论后编辑了代码.现在,当单击某个区域时,它会切换相应的单选按钮,并使用单击顺序移动其他检查.
我已将命名组添加到您的HTML中,如下所示.您可以通过更改输入组中的顺序来更改设备的顺序(“列”).
<input type="radio" name="radios1" id="radio0" value="0" /> <input type="radio" name="radios0" id="radio1" value="1" /> <input type="radio" name="radios2" id="radio2" value="2" /> <input type="radio" name="radios1" id="radio3" value="0" /> <input type="radio" name="radios0" id="radio4" value="1" /> <input type="radio" name="radios2" id="radio5" value="2" /> <input type="radio" name="radios1" id="radio6" value="0" /> <input type="radio" name="radios0" id="radio7" value="1" /> <input type="radio" name="radios2" id="radio8" value="2" />
此外,我已将区域ID中的数字更改为从零开始.
以上是大佬教程为你收集整理的javascript – 需要单击图像映射区域以选择相应的单选按钮全部内容，希望文章能够帮你解决javascript – 需要单击图像映射区域以选择相应的单选按钮所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。