日期:2014-05-16  浏览次数:20378 次

JQ在单选按钮点击后,改变单选项的字体和背景,再在后面显示他选择内容
HTML:
<div class='answerlist'>
<span>本题答案:</span>
<ul>
  <li><input name='Q1' type='radio' value='1' onclick='checkRadio(1);' />A</li>
  <li><input name='Q1' type='radio' value='2' onclick='checkRadio(2);'/>B</li>
  <li><input name='Q1' type='radio' value='3' onclick='checkRadio(3);'/>C</li>
  <li><input name='Q1' type='radio' value='4' onclick='checkRadio(4);'/>D</li>
</ul>
<span></span>
</div>


ul后面的span准备显示msg的内容,就是用户选择的项目,怎么能获得这个span?


JS:

<script>
function checkRadio(num) {
  var msg = null;
  switch (num) {
  case 1:
  msg = "您选择答案的是A。";
  break;
  case 2:
  msg = "您选择答案的是B。";
  break;
  case 3:
  msg = "您选择答案的是C。";
  break;
  case 4:
  msg = "您选择答案的是D。";
  break;
  }
//设置span内容
//设置选择的项目背景及字体
谢谢
}
</script>

------解决方案--------------------
HTML code

<div class='answerlist'>
<span>本题答案:</span>
<ul>
  <li><input name='Q1' type='radio' value='1' onclick='checkRadio(this);' />A</li>
  <li><input name='Q1' type='radio' value='2' onclick='checkRadio(this);'/>B</li>
  <li><input name='Q1' type='radio' value='3' onclick='checkRadio(this);'/>C</li>
  <li><input name='Q1' type='radio' value='4' onclick='checkRadio(this);'/>D</li>
</ul>
<span></span>
</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function checkRadio(obj) {
    var num = obj.value * 1;
  var msg = null;
  switch (num) {
  case 1:
  msg = "您选择答案的是A。";
  break;
  case 2:
  msg = "您选择答案的是B。";
  break;
  case 3:
  msg = "您选择答案的是C。";
  break;
  case 4:
  msg = "您选择答案的是D。";
  break;
  }
$(obj).parent().parent().parent().children('span')[1].innerHTML = msg;
$(obj).parent().parent().children('li').css('background-color', '#ffffff').css('font-weight', 'normal');
$(obj).parent().css('background-color', '#ff0000').css('font-weight', 'bold');
}
</script>