jQuery Radio Button Issue

Question

I'm using jQuery to show and hide a div. But even in true case else condition executes. I wonder what is my mistake. Thanks for any help in advance.

$(".budget").on("change",function () {
  var radioValue = $(".budget:checked").val();
  if (radioValue=="haveBudget") {
    alert($(this).val());   
  } else {
    alert("else part");
  }
});

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

<input type="radio" name="pref" class="budget" value="haveBudget" />
<input type="radio" name="pref" class="budget" value="10" />

You don't have any *else* block in the code.....do you have single radio button? — Mamun, Nov 26 '18 at 13:45
I don't see any issues with your code and as mentioned by @Manum there no else statement provided — dganenco, Nov 26 '18 at 13:50
Your code ( except some syntax issues and the comparison that should be `===` ) works as intended. see here -> http://jsfiddle.net/0o1mrapd/24/ — Mihai T, Nov 26 '18 at 13:51
@Mamun I've modified the code. My mistake and I have multiple buttons. — aishazafar, Nov 26 '18 at 14:04
Consider using input:checkbox is a better and more intuitive alternative for the user and for you the developer — Mario, Nov 26 '18 at 14:05
This is working alright on fiddle but not in my document @Mamun — aishazafar, Nov 26 '18 at 14:15

vsync · Answer 1 · 2018-11-26T14:11:49.533

You need to make some basic changes in your code:

// it's better to use event delegation
$(document).on("change", ".budget", function () {
    var radioValue = this.value; // <-- You have the value because "this" is the input
    
    if( radioValue == 'haveBudget' ){
        console.log('show DIV');
        // do whatever.. show your DIV
    }
    else{
        console.log('hide DIV');
    }
    
    console.log("---- value selected ----", radioValue);
})

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

<label>
  <input type="radio" name="pref" class="budget" value="haveBudget" />
  <span>Have Budget</span>
</label>

<label>
  <input type="radio" name="pref" class="budget" value="10" />
  <span>10</span>
</label>

Learn more about Event Delegation

score 0 · Answer 2 · answered Nov 26 '18 at 14:29

0

$(".budget").on("change",function () {
  var radioValue = $(this).val();
  if (radioValue=="haveBudget") {
    alert($(this).val());   
  } else {
    alert("else part");
  }
});

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

<input type="radio" name="pref" class="budget" value="haveBudget" />haveBudget
<input type="radio" name="pref" class="budget" value="10" />10

Use this for accessing value from current object.

answered Nov 26 '18 at 14:29

Sumesh TG

2,557
2
15
29

I've used both techniques. – aishazafar Nov 26 '18 at 16:28
@aishazafar Then what is the issue are you facing? – Sumesh TG Nov 27 '18 at 05:02
The issue is even in true if condition else part executes. – aishazafar Nov 27 '18 at 08:09
@aishazafar can you re-generate that issue in somewhere? – Sumesh TG Nov 27 '18 at 08:13

jQuery Radio Button Issue

2 Answers2