how to check for 2 conditions within a hover function

Question

I have a quiz page that asks a question and the user is to check 3 appropriate checkboxes as his or her answer (out of a list of 6 checkboxes). Then the user is to check his/her answers by hovering over the answer button ('#check-answer-btn')

If the user hovers over the $('#check-answer-btn') with less than 3 checkboxes checked, I want a certain alert $('.alert-box2') to fadeIn.

So my question is, can I have two conditionals within one hover function? I'm posting the code I have tried to no avail. Can someone help me find a solution? Thanks.

       $('#check-answer-btn').hover(function(e){
            var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
            if (checkboxes < 3) {
                $('.alert-box2').fadeIn(200);

            },  $('.alert-box2').stop().fadeOut(200);

            else if (checkboxes >= 3) {
                $('#checkbox-fadebox').fadeIn(200);
            },  $('#checkbox-fadebox').stop().fadeOut(200);
        );

I thought the HTML might be too much but here it is:

Please choose the best answer for each of the following questions. 
After you've selected your answer, roll over the Check Answer button.

        

            1.
Indicators are why the claim rep referred this questionable claim to you as an investigator.
            

            a.
True
            

            b.
False

            

            

        






        

        2.
Identify 3 reasons included in the following list that are reasons for creating a vehicle theft insurance fraud scheme.
            

            A.There is no work number for either Bob or Jane Field’s in the claim file.
            B.The vehicle had 8400 miles on it at the time of the theft.
            C.The theft happened in the middle of the day, downtown with no witnesses.
            D.Mrs. Fields parked the car one door down from Betty’s.
            E.The vehicle had a premium sound system.
            F.The vehicle had an anti-theft alarm that no one heard.

        


        

        Click NEXT to continue.

        
            The correct answer is a, true.
            Indicators of a questionable claim are inconsistencies in a claimant’s story, they don’t make sense in the over-all big picture.  As these indicators mount up, it becomes more important to investigate the claim.
        



        

            The following indicators of vehicle theft insurance fraud apply to this case.

            

        


        

            Please select the best answer(s)
 for each of the following questions.

            

        

        

            Please identify 3 reasons for creating a vehicle theft insurance fraud scheme.

Brian Seifert · Accepted Answer

I found my answer by discovering errors in my own syntax and breaking the conditionals into two separate ones. I realized that the value I assigned to my variable "checkboxes" was different than the one found in my HTML (.chbx-25b and .chbx-25a). Also, the first curly braces used after each of the "ifs" are incorrect. I have posted the successful block of code below. Thanks to all who attempted to help!

       $('#check-answer-btn').hover(function(){
            var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;

            if(checkboxes === 3)
                $('#checkbox-fadebox').fadeIn();
            }, function(){
                $('#checkbox-fadebox').stop().fadeOut();
        });

        $('#check-answer-btn').hover(function(){
            var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;

            if(checkboxes!== 3)
                $('.alert-box25b').fadeIn();
            }, function(){
                $('.alert-box25b').stop().fadeOut();
        });

how to check for 2 conditions within a hover function

Answers (1)

Related Questions