CODEWITHSUNDEEP
jquery
JoJo
JoJo

Reputation: 1473

OnClick function radio not working

I am calling function onclick radio button but its working on only one radio button not on other as well. How can I call the same function on both radio buttons ?

$("#trip_type_filter").change(function(){           
if($(this).val()=="yes")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').show();
    $('[class="all_inclusive_single"]').show();
    $('[class="all_inclusive_multi"]').show();
    $('[class="trip_cancellation"]').show();
  } 
else if($(this).val()=="no")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').hide();
    $('[class="all_inclusive_single"]').hide();
    $('[class="all_inclusive_multi"]').hide();
    $('[class="trip_cancellation"]').hide();
  }
});

Here is html:

<input type="radio" id="trip_type_filter" name="trip_type_filter" value="yes" /> Yes
<input type="radio" id="trip_type_filter" name="trip_type_filter" value="no" /> No

AND

<div class="single_trip">single_trip</div>
<div class="multi_trip">multi_trip</div>
<div class="all_inclusive_single">all_inclusive_single</div>
<div class="all_inclusive_multi">all_inclusive_multi</div>
<div class="trip_cancellation">trip_cancellation</div>

Upvotes: 1

Views: 65

Answers (4)

jyrkim
jyrkim

Reputation: 2869

You almost had it correct. I just changed your checkbox ids into classes, and the change event to respond to changes in that class:

<input type="radio" class="trip_type_filter" name="trip_type_filter" value="yes" />Yes
<input type="radio" class="trip_type_filter" name="trip_type_filter" value="no" />No


$(".trip_type_filter").change(function () {
    if ($(this).val() == "yes") {
        $('[class="single_trip"]').show();
        $('[class="multi_trip"]').show();
        $('[class="all_inclusive_single"]').show();
        $('[class="all_inclusive_multi"]').show();
        $('[class="trip_cancellation"]').show();
    } else if ($(this).val() == "no") {
        $('[class="single_trip"]').show();
        $('[class="multi_trip"]').hide();
        $('[class="all_inclusive_single"]').hide();
        $('[class="all_inclusive_multi"]').hide();
        $('[class="trip_cancellation"]').hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" class="trip_type_filter" name="trip_type_filter" value="yes" />Yes
<input type="radio" class="trip_type_filter" name="trip_type_filter" value="no" />No
<div class="single_trip">single_trip</div>
<div class="multi_trip">multi_trip</div>
<div class="all_inclusive_single">all_inclusive_single</div>
<div class="all_inclusive_multi">all_inclusive_multi</div>
<div class="trip_cancellation">trip_cancellation</div>

Upvotes: 0

ErasmoOliveira
ErasmoOliveira

Reputation: 1426

change your inputs ids. and check with class.

<input type="radio" id="trip_type_filter_yes" class="classToCheck" name="trip_type_filter" value="yes" /> Yes
<input type="radio" id="trip_type_filter_no" class="classToCheck" name="trip_type_filter" value="no" /> No

and use class chere

$(".classToCheck").change

Upvotes: 0

acontell
acontell

Reputation: 6922

Both ids are the same. Use different ids. Also add a class to your checkboxes and add the event to the class:

HTML

<input type="radio" id="trip_type_filter" class="checkChange" name="trip_type_filter" value="yes" /> Yes
<input type="radio" id="trip_type_filter2" class="checkChange" name="trip_type_filter" value="no" /> No

Javascript

$(".checkChange").change(function(){           
if($(this).val()=="yes")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').show();
    $('[class="all_inclusive_single"]').show();
    $('[class="all_inclusive_multi"]').show();
    $('[class="trip_cancellation"]').show();
  } 
else if($(this).val()=="no")
  {
    $('[class="single_trip"]').show();
    $('[class="multi_trip"]').hide();
    $('[class="all_inclusive_single"]').hide();
    $('[class="all_inclusive_multi"]').hide();
    $('[class="trip_cancellation"]').hide();
  }
});

Upvotes: 1

Sreelal P Mohan
Sreelal P Mohan

Reputation: 313

Change this

$("#trip_type_filter").change(function(){

To

$("input[type=radio][name=trip_type_filter]").change(function(){

Upvotes: 0

Related Questions