JQ在单选按钮点击后，改变单选项的字体和背景，再在后面显示他选择内容

jsitt 2012-03-22 03:14:09

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>

...全文

437 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

jsitt 2012-03-22

打赏
举报

可能是要循环清除一下再设置CSS

jsitt 2012-03-22

打赏
举报

有一个问题，如果我先点A，A项加红，是对的，后面提示也是对
可是我再接着点B，也就是我觉得选错了，修改，后面提示能修改，但CSS不能，看来是要清除一下，我自己来试，谢谢大佬们！

jsitt 2012-03-22

打赏
举报

谢谢楼上大哥，已经结贴了给不了分，再次感谢！

三石-gary 2012-03-22

打赏
举报

<!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>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script>

        $(function () {

            $('input[type="radio"]').click(function () {

                var num = $(this).val();

                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;

                }



                $(this).parent().parent().next().html(msg);

                $(this).parent().parent().children().css('background-color', '#ffffff').css('font-weight', 'normal');

                $(this).parent().css('background-color', '#ff0000').css('font-weight', 'bold');

            })

        })

    </script>

</head>

<body>

    <div class='answerlist'>

        <span>本题答案：</span>

        <ul>

            <li>

                <input name='Q1' type='radio' value='1' />A</li>

            <li>

                <input name='Q1' type='radio' value='2' />B</li>

            <li>

                <input name='Q1' type='radio' value='3' />C</li>

            <li>

                <input name='Q1' type='radio' value='4' />D</li>

        </ul>

        <span></span>

        <ul>

            <li>

                <input name='Q2' type='radio' value='1' />A</li>

            <li>

                <input name='Q2' type='radio' value='2' />B</li>

            <li>

                <input name='Q2' type='radio' value='3' />C</li>

            <li>

                <input name='Q2' type='radio' value='4' />D</li>

        </ul>

        <span></span>

    </div>

</body>

</html>

jsitt 2012-03-22

打赏
举报

是的，谢谢，我要的就是这样的效果

三石-gary 2012-03-22

打赏
举报

<!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>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script>

        $(function () {

            $('input[type="radio"]').click(function () {

                var num = $(this).val();

                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;

                }



                $(this).parent().parent().next().html(msg);

            })

        })

    </script>

</head>

<body>

    <div class='answerlist'>

        <span>本题答案：</span>

        <ul>

            <li>

                <input name='Q1' type='radio' value='1' />A</li>

            <li>

                <input name='Q1' type='radio' value='2' />B</li>

            <li>

                <input name='Q1' type='radio' value='3' />C</li>

            <li>

                <input name='Q1' type='radio' value='4' />D</li>

        </ul>

        <span></span>

        <ul>

            <li>

                <input name='Q2' type='radio' value='1' />A</li>

            <li>

                <input name='Q2' type='radio' value='2' />B</li>

            <li>

                <input name='Q2' type='radio' value='3' />C</li>

            <li>

                <input name='Q2' type='radio' value='4' />D</li>

        </ul>

        <span></span>

    </div>

</body>

</html>

是不是这样的效果？。。是的话接着解决第二个

jsitt 2012-03-22

打赏
举报

谢谢楼上大哥！

Acesidonu 2012-03-22

打赏
举报



<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>

jsitt 2012-03-22

打赏
举报

我刚试了，确实，我100条题目就是sp100，肯定不行：（

谢谢楼上的

三石-gary 2012-03-22

打赏
举报

[Quote=引用 10 楼 jsitt 的回复:]

恩，SPAN问题我来加ID，那INPUT怎么设置呀，谢谢比如我有

第1题
<ul>
<li id="q1"><input name='Q1' type='radio' value='1' onclick='checkRadio(1);' />A</li>
<li id="q2"><input name='Q1' type='radio' value='2' onclick……
[/Quote]
看懂你什么意思了。。你这样加Id 不得加死啊。。所以还是不要加Id了

jsitt 2012-03-22

打赏
举报

恩，SPAN问题我来加ID，那INPUT怎么设置呀，谢谢比如我有

第1题
<ul>
<li id="q1"><input name='Q1' type='radio' value='1' onclick='checkRadio(1);' />A</li>
<li id="q2"><input name='Q1' type='radio' value='2' onclick='checkRadio(2);'/>B</li>
<li id="q3"><input name='Q1' type='radio' value='3' onclick='checkRadio(3);'/>C</li>
<li id="q4"><input name='Q1' type='radio' value='4' onclick='checkRadio(4);'/>D</li>
</ul>

第2题
<ul>
<li id="q1"><input name='Q2' type='radio' value='1' onclick='checkRadio(1);' />A</li>
<li id="q2"><input name='Q2' type='radio' value='2' onclick='checkRadio(2);'/>B</li>
<li id="q3"><input name='Q2' type='radio' value='3' onclick='checkRadio(3);'/>C</li>
<li id="q4"><input name='Q2' type='radio' value='4' onclick='checkRadio(4);'/>D</li>
</ul>

第一题选中A，那就想设置A项为加粗，在后面显示你选择的答案是A，第二题选B，B项加粗，后面显示你选择的答案是B

想念旧时光 2012-03-22

打赏
举报

你给你的span添加ID 然后根据ID在js设置显示内容 innerHTML="";

三石-gary 2012-03-22

打赏
举报

[Quote=引用 7 楼 jsitt 的回复:]

如果使用ID，我是循环输出的相同内容，能否使用parent next之类的来进行选择？
[/Quote]
你span 不就那么一个吗？

jsitt 2012-03-22

打赏
举报

如果使用ID，我是循环输出的相同内容，能否使用parent next之类的来进行选择？

jsitt 2012-03-22

打赏
举报

不行，这只是一第题目呀，我要循环输出相同的代码很多条
不能用ID，我的想法是，获得当前选择的项，可以设置为显示红色，只是这一个，aspwebchh的代码把所有都显示为红色

并在这一条的后面的SPAN显示选择的这一条的答案

谢谢

Acesidonu 2012-03-22

打赏
举报



<div class='answerlist'>

<span>本题答案：</span>

<ul>

  <li id="q1"><input name='Q1' type='radio' value='1' onclick='checkRadio(1);' />A</li>

  <li id="q2"><input name='Q1' type='radio' value='2' onclick='checkRadio(2);'/>B</li>

  <li id="q3"><input name='Q1' type='radio' value='3' onclick='checkRadio(3);'/>C</li>

  <li id="q4"><input name='Q1' type='radio' value='4' onclick='checkRadio(4);'/>D</li>

</ul>

<span id="sp"></span>

</div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<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;

  }

document.getElementById('sp').innerHTML = msg;

$('li').css('background-color', '#ffffff').css('font-weight', 'normal');

$('#q' + num).css('background-color', '#ff0000').css('font-weight', 'bold');

}

</script>

挨踢直男 2012-03-22

打赏
举报

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:eq(1)").html(msg);

  $("input[value="+ num +"]").parent().css({'font-size':'20px','background':'#f00'}).siblings().attr('style','')

//设置span内容

//设置选择的项目背景及字体 谢谢

}

JQ?

三石-gary 2012-03-22

打赏
举报

<!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>

    <title></title>

    <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;

            }

            document.getElementsByTagName('span')[1].innerHTML = msg; //设置span内容

            //设置选择的项目背景及字体 谢谢

        }

</script>

</head>

<body>

<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>

</body>

</html>

三石-gary 2012-03-22

打赏
举报

<!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>

    <title></title>

    <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;

            }

            document.getElementsByTagName('span')[1].innerHTML = msg; //设置span内容

            //设置选择的项目背景及字体 谢谢

        }

</script>

</head>

<body>

<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 id='aaa'></span>

</div>

</body>

</html>