jQuery issue with If statement not working correctly

Question

I have the following code:

$(document).ready(function(){

    $("[name=q58]").each(function (i) {
        $(this).click(function () {
            var selection = $(this).val();
            alert('Q58 Value = '+selection)
            if (selection == '1') {
                $("#region").show();

                $("[name=q59]").each(function (i) {
                    $(this).click(function () {
                        var selection = $(this).val();
                        alert('Q59 Value = '+selection)
                        if (selection == '1') {
                            $("#location").show();
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#east, #north, #scotland, #southeast, #southwest").hide();
                            $("#central").show();
                        }
                        else if (selection == '2') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #north, #scotland, #southeast, #southwest").hide();
                            $("#east").show();
                        }
                        else if (selection == '3') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #scotland, #southeast, #southwest").hide();
                            $("#north").show();
                        }
                        else if (selection == '4') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #southeast, #southwest").hide();
                            $("#scotland").show();
                        }
                        else if (selection == '5') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southwest").hide();
                            $("#southeast").show();
                        }
                        else if (selection == '6') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast").hide();
                            $("#southwest").show();
                        }
                        else {
                            $("#location").hide();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                        }             
                    });
                });

            }
            else if (selection == '10') {
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                $("#location").hide();
                $("#region").show();
            }
            else {
                $("input:radio[name^='q59']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#region").hide();
                $("#location").hide();
                $("#central").hide();
            }             
        });
    });




});

Working, or rather not so working, example in JsFiddle: See example in JsFiddle: http://jsfiddle.net/ExPUu/1/

The following odd behaviour occurs:

The user selects Aftersales, they then see q59 and can select either Central or East and then see q60 and choose a further option. This works fine.

If the user selects Bus, Coach and Engines they don't get any further options - again works fine.

The odd behaviour is when the user selects Sales if they select this, they should be able to then select Central or East - if they have clicked Sales and nothing else, this works fine. BUT if they had selected Aftersales and then changed their mind and selected Sales and then select either Central or East - it then displays q60 and it shouldn't.

I've been looking through my jQuery code and cannot see where I am going wrong. Or is this an oddity?

U.P · Accepted Answer · 2013-08-05 09:37:10Z

1

The problem is with event binding In case of AfterSales, you are binding click event to q59. So when user selects Sales and select something from q59, the click handler executes. This is the piece of code that is causing the problem:

$("[name=q59]").each(function (i) {
  $(this).click(function () { ...

You can avoid this by either unbinding the event or using some condition inside the event to check whether AfterSales is selected or Sales is selected.

To unbind use

$("[name=q59]").each(function (i) {
                $(this).unbind('click');
                });

in else part.

See working fiddle

edited Aug 5, 2013 at 9:37

answered Jul 27, 2013 at 7:22

U.P

7,4527 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Homer_J Over a year ago

What I don't understand is that code should only be available if the users has select Aftersales - if they select anything else, that code shouldn't fire. Or is it because once it is bound it works regardless? Not sure how to stop this - any advice? Thanks for your input.

U.P Over a year ago

Once a click handler is bound with q59, it will execute every time any option is clicked in q50. See my updated answer for solution

Homer_J Over a year ago

Thanks - hadn't realised that once it was bound it would stay bound - learnt something new - appreciated.

Prabhjot Singh · Accepted Answer · 2013-07-27 07:36:02Z

Your code get some logic problem, i fix below try......

$(document).ready(function(){

    $("[name=q58]").each(function (i) {
        $(this).click(function () {
            var selection = $(this).val();
            alert('Q58 Value = '+selection)
            if (selection == '1') {
                $("#region").show();

                $("[name=q59]").each(function (i) {
                    $(this).click(function () {
                        var selection = $(this).val();
                        alert('Q59 Value = '+selection)
                        if (selection == '1') {
                            if($("[name=q58]:checked").val() == 1){
                            $("#location").show();
                            }

                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#east, #north, #scotland, #southeast, #southwest").hide();
                            if($("[name=q58]:checked").val() == 1){
                                $("#central").show();
                            }
                        }
                        else if (selection == '2') {

                            if($("[name=q58]:checked").val() == 1){
                            $("#location").show();
                            }
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #north, #scotland, #southeast, #southwest").hide();
                            if($("[name=q58]:checked").val() == 1){
                                $("#east").show();
                            }
                        }
                        else if (selection == '3') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #scotland, #southeast, #southwest").hide();
                            $("#north").show();
                        }
                        else if (selection == '4') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #southeast, #southwest").hide();
                            $("#scotland").show();
                        }
                        else if (selection == '5') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southwest").hide();
                            $("#southeast").show();
                        }
                        else if (selection == '6') {
                            $("#location").show();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast").hide();
                            $("#southwest").show();
                        }
                        else {
                            $("#location").hide();
                            $("input:radio[name^='central-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='east-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='north-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='scotland-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southeast-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("input:radio[name^='southwest-']").each(function(i) {
                                   this.checked = false;
                            });
                            $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                        }             
                    });
                });

            }
            else if (selection == '10') {
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#central, #east, #north, #scotland, #southeast, #southwest").hide();
                $("#location").hide();
                $("#region").show();
            }
            else {
                $("input:radio[name^='q59']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='central-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='east-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='north-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='scotland-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southeast-']").each(function(i) {
                       this.checked = false;
                });
                $("input:radio[name^='southwest-']").each(function(i) {
                       this.checked = false;
                });
                $("#region").hide();
                $("#location").hide();
                $("#central").hide();
            }             
        });
    });




});

58. In which Area do you work: Aftersales Bus, Coach and Engines Sales

    <div class="row" style="display:none;" id="region">
    <div class="col1">
        59.
    </div>
    <div class="col2a width400">
        In which Region do you work:        </div>
    <div class="direct2">
        <table style="table2">
            <tr id="trr1" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="q59" value="1" id="q591" type="radio"/></td>
                    <td class="td3"><label for="q591"> <b>Central</b></label></td>
                </tr><tr id="trr2" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="q59" value="2" id="q592" type="radio"/></td>
                    <td class="td3"><label for="q592"> <b>East</b></label></td>
                </tr>       </table>
    </div>
    </div>

    <div class="row" style="display:none;" id="location">
    <div class="col1">
        60.
    </div>
    <div class="col2a width400">
        In which Location do you work:      </div>
    <div class="direct2" style="display:none;" id="central">
        <table style="table2">
            <tr id="trlc1" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="central-q60" value="1" id="q601" type="radio"/></td>
                    <td class="td3"><label for="q601"> <b>Customer Operations</b></label></td>
                </tr><tr id="trlc2" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="central-q60" value="2" id="q602" type="radio"/></td>
                    <td class="td3"><label for="q602"> <b>Parts</b></label></td>
                </tr><tr id="trlc3" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    </table>
    </div>
    <div class="direct2" style="display:none;" id="east">
        <table style="table2">
            <tr id="trle5" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="east-q60" value="5" id="q605" type="radio"/></td>
                    <td class="td3"><label for="q605"> <b>Boston</b></label></td>
                </tr><tr id="trle6" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                    <td class="td1"><input  name="east-q60" value="6" id="q606" type="radio"/></td>
                    <td class="td3"><label for="q606"> <b>Doncaster VMU</b></label></td>
                </tr><tr id="trle7" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
                                </table>
    </div>

Collectives™ on Stack Overflow

jQuery issue with If statement not working correctly

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related