JQ在单选按钮点击后，改变单选项的字体和背景，再在后面显示他选择内容解决方法
日期：2014-05-16 浏览次数：20387 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
