CODEWITHSUNDEEP
jqueryradio-buttonhideshow
vzhen
vzhen

Reputation: 11157

Jquery radio button show and hide divs

My html and jquery code here. The jquery code performs if value ending with 123 a specify div will show. But i got a problem here. After i clicked on value c123 and d123 and switch back to a and b radio buttons. The showed div will not disappear. How to fix this?

<input type="radio" value="a" />
<input type="radio" value="b" />
<input type="radio" value="c123" />
<input type="radio" value="d123" />



<ul id="localBankc123" class="localBank">
  <li>Maybank</li>
</ul>
<ul id="localBankd123" class="localBank">
<li>CIMB Bank</li>
</ul>

$(".localBank").hide();
$("input[value$='123']").click(function() {
 var bank = $(this).val();
        $(".localBank").hide();
        $("#localBank"+bank).show();
    });

Upvotes: 0

Views: 594

Answers (3)

vijay
vijay

Reputation: 342

please try this code.. 

$(".localBank").hide();
$("input").click(function() {
    var bank = $(this).val();
    $(".localBank").hide();
    $("#localBank"+bank).show();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="bank" value="a" />
<input type="radio" name="bank" value="b" />
<input type="radio" name="bank" value="c123" />
<input type="radio" name="bank" value="d123" />
   

<ul id="localBankc123" class="localBank">
  <li>Maybank</li>
</ul>
<ul id="localBankd123" class="localBank">
<li>CIMB Bank</li>
</ul>

Upvotes: 0

erimerturk
erimerturk

Reputation: 4288

$(".localBank").hide();
$("input").click(function() {
  var bank = $(this).val();
  if (bank.indexOf("123") > -1){
    $("#localBank"+bank).show();
  }else{
     $(".localBank").hide();
   }
});

Upvotes: 0

Alessandro Vendruscolo
Alessandro Vendruscolo

Reputation: 14875

It would be better if you post the part of HTML with the .localBank stuff.

But, if I have understood your problem correctly, it won't hide your div because the handler doesn't get called (the input doesn't have a value ending with 123 indeed).

You can attach the handler to all of the inputs and then, inside the handler, show the div only if the clicked input has a value ending with 123.

Something like this:

$(".localBank").hide();
$("input").click(function() {
  var bank = $(this).val();
  $(".localBank").hide();
  if (bank.indexOf(/123$/) {
    $("#localBank"+bank).show();
  }
});

Upvotes: 1

Related Questions