JQ在单选按钮点击后,改变单选项的字体和背景,再在后面显示他选择内容解决方法
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:
<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>