DOM对象的选择，做一个选择题的JS

text指的是什么啊给input添加click事件试试

text是个class里面放着每道题的四个选项input

有代码么？选中的呈现就是css了，选中的值可以用隐藏域存起判断！

我的代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{ width:500px; height:auto; background:#A2D0FF;}
.text{ height:100px; background:#0C3; width:500px;}
.anwser{ height:100px; background:#CF6; width:500px; display:none;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oText=oDiv.getElementsByClassName("text");
var oAn=document.getElementsByClassName("anwser");

  for(var i=1;i<oText.length;i++)
   {
      oAn.index[i]=i;
   function choose()
   {
   var oInput=this.getElementsByTagname("inpute");
      for( var j=1;j<oInput.length;j++)
  {
  oInput[j].onclick=function()
    {
oAn[indext].style.display="block";
}
  }

}

   }
}
</script>
<body>
<div id="div1"><p>This is the first question description.</p>
   <div class="text">
A.one<input  type="radio"/>
B.two<input  type="radio"/>
C.three<input  type="radio"/>
D.four<input  type="radio"/>
</div>
<div class="anwser">This is the answer.</div>
<p>This is the first question description.</p>
<div class="text">
A.one<input  type="radio"/>
B.two<input  type="radio"/>
C.three<input  type="radio"/>
D.four<input  type="radio"/>
</div>
<div class="anwser">This is the answer.</div>
</div>
</body>
</html>

我的代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{ width:500px; height:auto; background:#A2D0FF;}
.text{ height:100px; background:#0C3; width:500px;}
.anwser{ height:100px; background:#CF6; width:500px; display:none;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oText=oDiv.getElementsByClassName("text");
var oAn=document.getElementsByClassName("anwser");

  for(var i=1;i<oText.length;i++)
   {
      oAn.index[i]=i;
   function choose()
   {
   var oInput=this.getElementsByTagname("inpute");
      for( var j=1;j<oInput.length;j++)
  {
  oInput[j].onclick=function()
    {
oAn[indext].style.display="block";
}
  }

}

   }
}
</script>
<body>
<div id="div1"><p>This is the first question description.</p>
   <div class="text">
A.one<input  type="radio"/>
B.two<input  type="radio"/>
C.three<input  type="radio"/>
D.four<input  type="radio"/>
</div>
<div class="anwser">This is the answer.</div>
<p>This is the first question description.</p>
<div class="text">
A.one<input  type="radio"/>
B.two<input  type="radio"/>
C.three<input  type="radio"/>
D.four<input  type="radio"/>
</div>
<div class="anwser">This is the answer.</div>
</div>
</body>
</html>

不知道为什么总是达不到预期效果。

答案部分原先是隐藏的。只有点击了input之后才能看到，这就是目前的主要目的。oAn指的是隐藏了的答案，text指的是放四个input的部分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{ width:500px; height:auto; background:#A2D0FF;}
.text{ height:100px; background:#0C3; width:500px;}
.anwser{ height:100px; background:#CF6; width:500px; display:none;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById("div1");
    var oText=oDiv.getElementsByClassName("text");
    var oAn=document.getElementsByClassName("anwser");
    var index=0;
var select_arr

for(var i=0;i<oText.length;i++){
  select_arr=oText[i].getElementsByTagName("input");
  for(var j=0;j<select_arr.length;j++){
      select_arr[j].onclick=function(){
     for(var i=0;i<oText.length;i++){
    if(oText[i]==this.parentNode){
    index=i;
}
}
oAn[index].style.display="block";
  }
   }
}
}
</script>
<body>
<div id="div1"><p>This is the first question description.</p>
   <div class="text">
    A.one<input  type="radio"/>
    B.two<input  type="radio"/>
    C.three<input  type="radio"/>
    D.four<input  type="radio"/>
    </div>
        <div class="anwser">This is the answer.</div>
            <p>This is the first question description.</p>
                <div class="text">
                    A.one<input  type="radio"/>
                    B.two<input  type="radio"/>
                    C.three<input  type="radio"/>
                    D.four<input  type="radio"/>
                </div>
                    <div class="anwser">This is the answer.</div>
</div>
</body>
</html>
是不是这样！

可以点击text之后让与text同父下的input进行显示就好了啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{ width:500px; height:auto; background:#A2D0FF;}
.text{ height:100px; background:#0C3; width:500px;}
.anwser{ height:100px; background:#CF6; width:500px; display:none;}
</style>
<body onload="init()">
<div id="div1">
<p>This is the first question description.</p>
    <div id='1' class="text">
A.one<input id='a'  type="radio"/>
B.two<input id='b' type="radio"/>
C.three<input id='c' type="radio"/>
D.four<input id='d' type="radio"/>
</div>
<div id='1' class="anwser">This is the answer.</div>
<p>This is the first question description.</p>
<div id='2' class="text">
A.one<input id='a'  type="radio"/>
B.two<input id='b' type="radio"/>
C.three<input id='c' type="radio"/>
D.four<input id='d' type="radio"/>
    </div>
<div id="2" class="anwser">This is the answer.</div>
</div>
</body>
<script>
var oDiv=document.getElementById("div1");
var textList = oDiv.getElementsByClassName('text');
var showList = oDiv.getElementsByClassName('anwser');
//注册事件
function init(){
f2();
}
//隐藏所有answer和清除当前所选
function noneText(checkDivID){
for(var i=0;i<textList.length;i++){
showList[i].name=showList[i].style.display='none';
}
if(checkDivID){
var text = textList[checkDivID].getElementsByTagName('input');
for(var i = 0;i < text.length;i++){
text[i].checked=false;
}
}
}
//注册点击事件
function f2() {
var d = oDiv;
d.onclick = function(e) {
var e = e || window.event;
                var target = e.srcElement || e.target;
                if (target.type == 'radio' && target.parentElement.id!='') {
//获取点击事件题目id
var id = target.parentElement.id-1;
                    noneText(id);
//添加所选选项
textList[id].getElementsByTagName('input')[target.id].checked = true;
//显示题目答案
var showText = showList[id];
showText.name=showText.style.display='block';
                }
}
}
</script>
</html>

把四个input的name属性都设置为同一个，就可以实现只能选一个答案了。
                    A.one<input  type="radio" name="test"/>
                    B.two<input  type="radio" name="test"/>
                    C.three<input  type="radio" name="test"/>
                    D.four<input  type="radio" name="test"/>

调试易

DOM对象的选择，做一个选择题的JS

解决方案 »