如何在问卷表单中添加显示/隐藏

时间：2013-08-30 04:54:03

标签： javascript html

我如何制作它以便在点击上面的行图像之前隐藏每个问题。我基本上想在这个表单中添加一个show / hide div。当每个问题都得到解答时，“下一步”按钮会在结尾处弹出显示。如果用户决定改变主意并点击另一个答案或图像，则所有内容都会重新隐藏并再次显示内容。我已经创建了一个单独的测试表单，它可以工作，但它的功能我想要它，所以现在我在这里。帮我。 

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            $(window).load(function () {
                $('.radio div').on('click', function () {
                    var $this = $(this),
                        $parent = $this.parent(),
                        value = $this.attr('value');

                    $parent.children().removeClass('active');
                    $this.addClass('active');
                    $parent.attr('value', value);

                    //get all selected radios
                    var q1 = $('div[name="q1"].active');
                    var q2 = $('div[name="q2"].active');
                    var q3 = $('div[name="q3"].active');
                    var q4 = $('div[name="q4"].active');

                    //make sure the user has selected all 3
                    if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0) {
                        //now we know we have 3 radios, so get their values
                        q1 = q1.attr('value');
                        q2 = q2.attr('value');
                        q3 = q3.attr('value');
                        q4 = q4.attr('value');

                        // activate button
                        $('#next_button').removeAttr('disabled');

                        //now check the values to display a different link for the desired   
                        configuration
                        if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
                            $('#next_button').val('att 8gb black').click(function () {
                                window.location.href = 'http://google.com/'
                            });
                        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next  
    onclick=\"window.location.href='http://bing.com/';\">another option</input>";
                        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
                        } else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
                        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
                        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick=\"window.location.href='http://webs.com/';\">orange</input>";
                        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
                        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
                            document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
    onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
                        }
                    }

                });

            }); //]]>
        </script>
    </head>

    <body class="questionnaire">
        <form name="quiz" id='quiz'>
             <h4>Choose your series.</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-3GS">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-4">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-4S">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                    />
                </div>
            </div>
            <div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                />
            </div>
            </div>
            <div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                />
            </div>
            </div>
            <br />
            <br />
            <BR>
             <h4>What carrier do you have?</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" name="q1" value="AT&T">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png"
                    />
                </div>
                <div style="list-style: none;" name="q1" value="Unlocked">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png"
                    />
                </div>
            </div>
            <br />
            <br />
            <BR>
             <h4>What is your phones capicity?</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" type="radio" name="q2" value="8GB">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q2" value="16GB">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png"
                    />
                </div>
            </div>
            <br />
            <br />
            <BR>
             <h4>What color is your phone?</h4>

            <div class="radio" id="form">
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-3GS">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-4">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-4S">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
                    />
                </div>
                <div style="list-style: none;" type="radio" name="q3" value="iPhone-5">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
                    />
                </div>
            </div>
            <br/>
            <br />
            <br />
            <BR>
            <BR>
            <div id="linkDiv">
                <input id="next_button" type="button" disabled="disabled" value="Next"
                />
            </div>
        </form>
    </body>

</html>

http://jsfiddle.net/urr3B/

2 个答案:

答案 0 :(得分：1)

var flag = false;
$(window).load(function(){
$('.radio div').on('click', function () {
 ...........
 ...........
 if(flag)
    resetQuestions();

 if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0)
 {
      flag=true;
      .......... } ..............       
});});


function resetQuestions(){
   //your reset code
}
  • 在回答完所有问题后设置标记
  • 每次点击div时都会继续检查该标志
  • 如果找到该标志设置（即所有问题都已被回答），请调用重置功能
  • 在该重置功能中重置问题

答案 1 :(得分：1)

首先，你的html中有很多错误。 div上有未闭合的标签，相同的ID，类型属性，但它应该在输入字段中。除此之外，我的想法是将每个问题都包含在div中，并在需要时显示/隐藏它。这是代码：

var questions = $(".question");
var showQuestions = function(index) {
    for(var i=0; i<questions.length; i++) {
        if(i < index) {
            questions.eq(i).css("display", "block");
        } else {
            questions.eq(i).css("display", "none");
        }
    }    
}

for(var i=0; i<questions.length; i++) {
    (function(index) {
        questions.eq(index).find("div[type='radio']").on("click", function() {
            showQuestions(index+2);
        })
    })(i);
}
showQuestions(1);

以下是您网页的完整代码。 

<!DOCTYPE html>
<html>
<head>

    <style type='text/css'>
        .radio div[type='radio'] {
            background: url($image) no-repeat #eee;
            height:55px;
            width:60px;
            border:1px solid #DDD;
            border-radius:10px;
            padding:1px;
            float:left;
            margin-right:10px;
            cursor:pointer
        }
        .radio div.active{
            box-shadow:0 0 2px 1px #00f inset;
        }
        img {
            width: 60px;
            height: 55px;
            border: 0px solid #666;
            background: #fff;
            display:block;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
        .question {
            margin: 20px 0 20px 0;
            display: none;
            clear: both;
        }
        #linkDiv {
            margin: 0;
        }
        .clear {
            clear: both;
        }
    </style>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(window).load(function(){
$('.radio div').on('click', function() {
var $this   = $(this),
    $parent = $this.parent(),
    value   = $this.attr('value');

    $parent.children().removeClass('active');
    $this.addClass('active');
    $parent.attr('value', value);

    //get all selected radios
    var q1=$('div[name="q1"].active');
    var q2=$('div[name="q2"].active');
    var q3=$('div[name="q3"].active');
    var q4=$('div[name="q4"].active');

    //make sure the user has selected all 3
    if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0)
    {
        //now we know we have 3 radios, so get their values
        q1=q1.attr('value');
        q2=q2.attr('value');
        q3=q3.attr('value');
        q4=q4.attr('value');

        // activate button
        $('#next_button').removeAttr('disabled');

        //now check the values to display a different link for the desired  configuration
        if (q1=="AT&T" && q2=="8GB" && q3=="Black" && q4=="Black")
        {
            $('#next_button').val('att 8gb black').click(function() {  
window.location.href='http://google.com/' } );
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://bing.com/';\">another option</input>";
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="Black" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
        }
        else if (q1=="AT&T" && q2=="8GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
        }

        else if (q1=="Unlocked" && q2=="8GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
        }
        else if (q1=="Unlocked" && q2=="8GB" && q3=="Black" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://webs.com/';\">orange</input>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="White" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="Black" && q4=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
        }
    }

}); 

var questions = $(".question");
var showQuestions = function(index) {
    for(var i=0; i<questions.length; i++) {
        if(i < index) {
            questions.eq(i).css("display", "block");
        } else {
            questions.eq(i).css("display", "none");
        }
    }    
}

for(var i=0; i<questions.length; i++) {
    (function(index) {
        questions.eq(index).find("div[type='radio']").on("click", function() {
            showQuestions(index+2);
        })
    })(i);
}
showQuestions(1);

});//]]>  

</script>

</head>
<body class="questionnaire">

<form name="quiz" id='quiz'>

    <div class="question">
        <h4>Choose your series.</h4>
        <div class="radio" id="form">
            <div type="radio" name="q4" value="iPhone-3GS">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-4">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-4S">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
            <div type="radio" name="q4" value="iPhone-5">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
        </div>
    </div>

    <br class="clear" />
    <div class="question">
        <h4>What carrier do you have?</h4>
        <div class="radio" id="form">
            <div type="radio" name="q1" value="AT&T">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png" />
            </div>   
            <div type="radio" name="q1" value="Unlocked">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png" />
            </div>
        </div>
    </div>

    <br class="clear" />
    <div class="question">
        <h4>What is your phones capicity?</h4>
        <div class="radio" id="form">
            <div type="radio" name="q2" value="8GB">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png" />
            </div>
            <div type="radio" name="q2" value="16GB">
                <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png" />
            </div>
        </div>
    </div>

    <br class="clear" />
    <div class="question">
        <h4>What color is your phone?</h4>
            <div class="radio" id="form">
                <div type="radio" name="q3" value="iPhone-3GS">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
                </div>
                <div type="radio" name="q3" value="iPhone-4">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png" />
                </div>
                <div type="radio" name="q3" value="iPhone-4S">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
                </div>
                <div type="radio" name="q3" value="iPhone-5">
                    <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
                </div>
            </div>
    </div>

    <br class="clear" />
    <div id="linkDiv">
        <input id="next_button" type="button" disabled="disabled" value="Next" />
    </div>

</form>

</body>
</html>
相关问题
最新问题