CODEWITHSUNDEEP
javascriptjquery
Jimmy
Jimmy

Reputation: 12487

Show divs based on radio buttons

My radio buttons:

<input type="radio" name="radio-269" value="Purchase Only" />
<input type="radio" name="radio-269" value="Sale Only" />
<input type="radio" name="radio-269" value="Purchase and Sale" />

Then my divs:

<div id="sale">
SALE!
</div>

<div id="purchase">
PURCHASE!
</div>

Finally my javascript at the moment:

<script>
$("input[name='radio-269']").change(function() {
    if ($(this).val() == "Purchase and Sale") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
    if ($(this).val() == "Purchase Only" || $(this).val() == "Sale Only") {
       $('#purchase').removeClass("hidden");
    }
    else {
        $('#purchase').addClass("hidden");
    }
});
</script>

How do I change it so the following occurs:

Would someone please show me the best way of modifying my javascript to achieve this?

Upvotes: 0

Views: 448

Answers (4)

Evicted Cache
Evicted Cache

Reputation: 1401

It looks like you got your wires crossed a bit in your example. This should work:

$("input[name='radio-269']").change(function() {

   if ($(this).val() == "Purchase Only") {
      $('#purchase').removeClass("hidden");
      $('#sale').addClass("hidden");
   }
   else if ($(this).val() == "Sale Only") {
      $('#sale').removeClass("hidden");
      $('#purchase').addClass("hidden");
   }
   else if ($(this).val() == "Purchase and Sale") {
      $('#sale').removeClass("hidden");
      $('#purchase').removeClass("hidden");
   }
});​

Here's a JS Fiddle that shows it working: http://jsfiddle.net/yYBSV/1/

Upvotes: 2

AJak
AJak

Reputation: 3873

Seems like you just need to modify your if/ else statment to get your code to work. Although I would recommend against using val() and plain text to do the detection. If you changed the html value the code would break. (it happens more often then you would think)

The solution should look something along the lines of this:

$("input[name='radio-269']").change(function() {
if ($(this).val() == "Purchase and Sale") {
   $('#purchase').show();
   $('#sale').show();
}else if ($(this).val() == "Sale Only") {
   $('#purchase').hide();
   $('#sale').show();
}else if ($(this).val() == "Purchase Only") {
   $('#purchase').show();
   $('#sale').hide();
}
});​

Upvotes: 0

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

Change your javascript to :

$("input[name='radio-269']").change(function() {
    $('#sale, #purchase').removeClass("hidden");

    if ($(this).val() == "Purchase Only") {
       $('#sale').addClass("hidden");
    }
    if($(this).val() == "Sale Only") {
        $('#purchase').addClass("hidden");
    }
});

Here is a jsFiddle : http://jsfiddle.net/scaillerie/2meM5/ .

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You can use HTML-5 data-attributes to hold the corresponding ids'

<input type="radio" name="radio-269" value="Purchase Only" data-id="#purchase" />
<input type="radio" name="radio-269" value="Sale Only" data-id="#sale" />
<input type="radio" name="radio-269" value="Purchase and Sale" 
                                               data-id="#purchase,#sale"  />

<div id="sale">
SALE!
</div>

<div id="purchase">
PURCHASE!
</div>

JS

$("input[name='radio-269']").change(function() {
    $('div').hide();
    var id = $(this).data('id');
    $(id).show();
});​

Check Fiddle ​

Upvotes: 0

Related Questions