Reputation: 1257

Show and hide in jquery

I have tried to show and hide in jquery in onload but it have not shown could some one look and provide solution..i just done onclick of radio button listbox wants to display..Any ideas

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).load = function () {
  $("#main input[name='B']").click(function () {
    alert("hiiii");
    if ($('input[name=B]:checked').val() == "country") {
      alert("country");


      $("#country").show();
      $("#state,#city").hide();

    }
    if ($('input[name=B]:checked').val() == "state") {
      alert("state");

      $("#state").show();
      $("#country,#city").hide();

    }
    if ($('input[name=B]:checked').val() == "city") {
      alert("city");

      $("#city").show();
      $("#country,#state").hide();

    }
  });
</script>

</head>

<body>
  <table cellpadding="0" cellspacing="0" border="2">
    <tr>
      <td>
        <input type="radio" name="B" value="country">
      </td>
      <td>Country</td>
      <td>
        <input type="radio" name="B" value="state">
      </td>
      <td>State</td>
      <td>
        <input type="radio" name="B" value="city">
      </td>
      <td>City</td>

    </tr>
  </table>

  Productline:
  <select id="productline">
    <option value="Motorcycles">Motorcycles</option>
    <option value="Planes">Planes</option>
    <option value="Ships">Ships</option>
    <option value="Trains">Trains</option>
  </select>
  <select id="country">
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Belgium">Belgium</option>
    <option value="Canada">Canada</option>
    <option value="Denmark">Denmark</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
  </select>

  <select id="state">
    <option value="BC">BC</option>
    <option value="CA">CA</option>
    <option value="CT">CT</option>
    <option value="Isle&#32;of&#32;Wight">Isle&#32;of&#32;Wight</option>
    <option value="MA">MA</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NSW">NSW</option>
    <option value="NV">NV</option>
  </select>
  <select id="city">
    <option value="Allentown">Allentown</option>
    <option value="Århus">Århus</option>
    <option value="Auckland&#32;&#32;">Auckland&#32;&#32;</option>
    <option value="Barcelona">Barcelona</option>
    <option value="Bergamo">Bergamo</option>
    <option value="Bergen">Bergen</option>
    <option value="Boston">Boston</option>
    <option value="Bräcke">Bräcke</option>
    <option value="Brickhaven">Brickhaven</option>
    <option value="Bridgewater">Bridgewater</option>
    <option value="Brisbane">Brisbane</option>
    <option value="Bruxelles">Bruxelles</option>
  </select>

</body>

Upvotes: 0

Answers (6)

artfuldev

Reputation: 1118

You are complicating things while missing the power of jQuery.

You can simply change the input names to location, add a data-choose="location" attribute to the select elements you need to show or hide depending on the radio and write simpler and valid code without hardcoding anything like "state,"city", or "country" strings.

See this.

This will be all the jQuery you need:

$(function () {
    $('[data-choose="location"]').hide();
    $('[name="location"]').change(function () {
        $('[data-choose="location"]').hide();
        $('#'+$(this).val()).show();
    });
})

EDIT: Changed .click to .change upon Jai's advice.

Upvotes: 0

Jai

Reputation: 74738

This is a wrong syntax:

$(window).load =function()

correct is:

$(window).load(function()

But my suggestion is to use it on $(function(){}); document ready.

So you can try this:

add an id #main to your table:

<table cellpadding="0" cellspacing="0" border="2" id="main">
   //-------------------------------here----------^^^^^^^^

$(function(){ // <----document ready function shorter version
    $("#main :radio").on('change', function(){ // <---apply change event
        $('#'+this.value).show(); //<---show the target
        if($(e.target).val() == 'country'){
           $('#'+this.value).siblings('select:not(#productline)').hide(); 
        } //--^----------------------------------^hide only if country is checked
    });
});

Updated Demo @ Fiddle as per comment suggested by kenshin.thebattosai

Upvotes: 1

rajesh kakawat

Reputation: 10896

try something like this

 $(window).load(function(){
    $("input[name=B]").change(function(){
     if($('input[name=B]:checked').val()=="country")
     {
            alert("country");


            $("#country").show();
            $("#state,#city").hide();

     }
     if($('input[name=B]:checked').val()=="state")
     {
            alert("state");

            $("#state").show();
            $("#country,#city").hide();

     }
     if($('input[name=B]:checked').val()=="city")
     {
            alert("city");
            $("#city").show();
            $("#country,#state").hide();
     }
});
});

You have no #main element
$(window).load =function() { should be $(window).load(function() {
use $(document).ready(function () { instead of $(window).load(function() {

ALTERNATE SOLUTION

try to make your code simple

$(window).load(function(){
    $("input[name=B]").change(function(){
        var elem = "#" + $('input[name=B]:checked').val();
        if($(elem).length){
            $("#country,#state,#city").hide();
            $(elem).show();
        }
    });
});

Upvotes: 0

Sherin Jose

Reputation: 2526

Try this one:

$( document ).ready(function(e) {
    $("input[name=B]").click(function () {
        if ($('input[name=B]').is(':checked')) {
            var val =   $('input[name=B]:checked').val();
            switch(val){
                case "country":
                alert("country");
                $("#country").show();
                $("#state,#city").hide();
                break;

                case "state":
                alert("state");         
                $("#state").show();
                $("#country,#city").hide();
                break;

                case "city":
                alert("city");          
                $("#city").show();
                $("#country,#state").hide();
                break;
            }
        }
    });
});

Upvotes: 0