CODEWITHSUNDEEP
javascriptjquery
ritika
ritika

Reputation: 13

On select radio button show div jquery

I am using three radio button for showing three different divs. But it is not working. here is my script

<script>

$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
    var test = $(this).val();

    $("div.desc").hide();
    $("#Cars" + test).show();
});
});
</script>

Here is my js-fiddle of demo of my work :

http://jsfiddle.net/sam050/PHu99/

Upvotes: 0

Views: 126

Answers (6)

Nidhin S G
Nidhin S G

Reputation: 1695

Try this Fiddle.

$(document).ready(function() {
    $("input[name$='Want_To']").click(function() {
        var test = $(this).val();
        console.log("#"+test);
        $(".a").hide();
        $("#"+test).show();
    });
});

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to change the values of your radio-elements according to your div, Also make a common class for all div containers, so that only one div would be shown at a time,

Try t like,

$(document).ready(function () {  
    $(".item-div").hide();
    // show checked radio div
    $('#'+$('[name="Want_To"]:checked').val()).show();
    $("input[name='Want_To']").click(function () {
        var test = $(this).val();
        $(".item-div").hide();
        $("div.desc").hide();
        $("#" + test).show();
    });
});

Live Demo

Upvotes: 0

Just code
Just code

Reputation: 13801

.usertype{ border-bottom: 1px solid #E3E3E3; padding: 15px 12px;}
.usertype ul{margin-top:0px;}
.usertype ul li{margin-bottom:15px;}
.usertype ul li label{margin: 0px 15px 0px; width:160px;display:inline-block;vertical-align: top;background: none;
border: none; color: #666;}
.usertype input[type="radio"]:checked + .new-label{ color:#2C96D0 !important; border-color:#2c97d3; background:#2C96D0; }
.usertype ul li label.new-label {
    width: auto;
    margin-left: 15px;
    color: #9E9E9E;
    display: inline-block;
    font: 700 13px/31px Open Sans Bold,Arial,Helvetica,sans-serif;
    padding: 0px 10px;
    background: linear-gradient(to bottom, #E8E8E8 0%, #FFF 100%) repeat scroll 0% 0% transparent;
    border: 1px solid #D6D6D6;
    border-radius: 5px;}
.usertype input {
    margin-right: -30px;
}
#sell,#rent,#PG
{
    display:none;

}

and your js

$(document).ready(function() {
    $("input[name$='Want_To']").click(function() {
      $('#sell,#rent,#PG').hide();
        var test = $(this).val();

        $("div.desc").hide();
        $("#" + test).show();
    });
});

I have used little bit different approach here

Chec here demo Demo

Upvotes: 1

Sid
Sid

Reputation: 801

Updated script and Add Jquery 

$(document).ready(function() {
    $("input[name$='Want_To']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#" + test).show();
    });
});

and updated html

<div class="usertype">
    <ul>
        <li id="userpr"><label>I want to:</label>
        <input type="radio" name="Want_To" value="sell" id="Sell"  checked /><label class="new-label selected" for="Sell">Sell</label>  
                <input type="radio" name="Want_To" value="rent"  id="Rent/Lease" /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
                <input type="radio" name="Want_To" value="PG" id="Want-To-PG" /><label class="new-label" for="Want-To-PG">PG</label> </li>
        <div id="sell" class="desc" style="display:none">
            Show sell div
        </div>
        <div id="rent" class="desc" style="display:none">
            Show rent div
        </div>
        <div id="PG"  class="desc" style="display:none">
            Show PG div
        </div>
    </ul>
</div>

I hope this will work for you Good Luck!

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this HTML

<div class="usertype">
    <ul>
        <li id="userpr">
            <label>I want to:</label>
            <input type="radio" name="Want_To" value="sell" id="Sell" checked />
            <label class="new-label selected" for="Sell">Sell</label>
            <input type="radio" name="Want_To" value="rent" id="Rent/Lease" />
            <label class="new-label" for="Rent/Lease">Rent/Lease</label>
            <input type="radio" name="Want_To" value="PG" id="Want-To-PG" />
            <label class="new-label" for="Want-To-PG">PG</label>
        </li>
    </ul>
    <div id="sell">Show sell div</div>
    <div id="rent">Show rent div</div>
    <div id="PG">Show PG div</div>
</div>

Script

$(document).ready(function() {
    $("#sell,#rent,#PG").hide();
    $("input[name$='Want_To']").click(function() {
        var test = $(this).attr('value');   console.log(test)
        $("#"+test).show().siblings('div').hide();
    });
});

DEMO

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

first add jquery on yopur page

then HTML would be

<div class="usertype">
    <ul>
        <li id="userpr"><label>I want to:</label>
        <input type="radio" name="Want_To" value="sell"  checked /><label class="new-label selected" for="Sell">Sell</label>    
                <input type="radio" name="Want_To" value="rent"  /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
                <input type="radio" name="Want_To" value="PG"  /><label class="new-label" for="Want-To-PG">PG</label> </li>
        <div id="sell" class="desc">
            Show sell div
        </div>
        <div id="rent" class="desc">
            Show rent div
        </div>
        <div id="PG" class="desc">
            Show PG div
        </div>
    </ul>
</div>

and javascript code would be

$(document).ready(function(){
       $("input[type='radio']").change(function() {
            var test = $(this).val();
            $("div.desc").hide();
            $("#" + test).show();
        });
});

Upvotes: 0

Related Questions