Homer_J
Reputation: 3323
jQuery issue with If statement not working correctly
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?
Upvotes: 1
Views: 68
Answers (2)
U.P
Reputation: 7442
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
Upvotes: 1
Prabhjot Singh
Reputation: 98
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();
}
});
});
});
<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>
Upvotes: 0
Related Questions
- If/else statement doesn't work in jQuery as I think it should
- If..else statement not working as expected
- jQuery: Issue with if
- jQuery If then not working right
- if statement not working properly in jquery
- jQuery if else statement issue
- jquery if statement not functioning correctly
- if statement not functioning correctly
- jquery if statement is not working correctly
- jQuery problem with if()