最近在做考试系统,因为学校机房大部分都是IE6,做的很蛋疼,在做答案提交时,针对多选题,原本设计的是在li失去焦点时提交,但在实现过程中发现IE下出现问题。先上代码:
HTML部分: <h3 class="questionList">二、多选题(每小题5分,共30分)</h3>
<div class="manyChoiceQuestion">
<ol class="manyChoiceQuestionList">
<li tabindex="0" id="201">
<span class="">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</span>
<div><div class="optioninput"><input type="checkbox" value="A" name="test"/>A.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
<div><div class="optioninput"><input type="checkbox" value="B" name="test"/>B.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
<div><div class="optioninput"><input type="checkbox" value="C" name="test"/>C.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
<div><div class="optioninput"><input type="checkbox" value="D" name="test"/>D.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
</li>
</ol>
</div>Jquery部分:$(".manyChoiceQuestionList li").focusout(function(){
var id=$(this).attr("id");
var aswlist=[];
$(this).find("input").each(function(index,item){
if($(item).attr('checked'))
{aswlist.push($(item).val());}
});
alert(id+","+aswlist.join(','));
});
$(".manyChoiceQuestionList li div.optionanswer").click(function(){
var input=$(this).prev("div.optioninput").children("input");
if(input.attr("checked"))
{input.attr("checked",false);}
else
{input.attr("checked",true);}
});在IE下出现的问题是选择答案时就出发了li元素的focusout事件,使checkbox获取焦点。目前猜测问题产生的原因是input元素是独立于li元素之外的,所以当选择答案使input元素获取焦点时,li就失去了焦点,所以触发focusout事件,但是不知道怎样解决,试了很多方法都不行,求大神解决!在线等
HTML部分: <h3 class="questionList">二、多选题(每小题5分,共30分)</h3>
<div class="manyChoiceQuestion">
<ol class="manyChoiceQuestionList">
<li tabindex="0" id="201">
<span class="">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</span>
<div><div class="optioninput"><input type="checkbox" value="A" name="test"/>A.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
<div><div class="optioninput"><input type="checkbox" value="B" name="test"/>B.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
<div><div class="optioninput"><input type="checkbox" value="C" name="test"/>C.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
<div><div class="optioninput"><input type="checkbox" value="D" name="test"/>D.</div><div class="optionanswer">这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题这是多选题</div></div>
</li>
</ol>
</div>Jquery部分:$(".manyChoiceQuestionList li").focusout(function(){
var id=$(this).attr("id");
var aswlist=[];
$(this).find("input").each(function(index,item){
if($(item).attr('checked'))
{aswlist.push($(item).val());}
});
alert(id+","+aswlist.join(','));
});
$(".manyChoiceQuestionList li div.optionanswer").click(function(){
var input=$(this).prev("div.optioninput").children("input");
if(input.attr("checked"))
{input.attr("checked",false);}
else
{input.attr("checked",true);}
});在IE下出现的问题是选择答案时就出发了li元素的focusout事件,使checkbox获取焦点。目前猜测问题产生的原因是input元素是独立于li元素之外的,所以当选择答案使input元素获取焦点时,li就失去了焦点,所以触发focusout事件,但是不知道怎样解决,试了很多方法都不行,求大神解决!在线等
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货