CODEWITHSUNDEEP
jqueryradio-buttonshow-hide
user2004710
user2004710

Reputation: 187

jQuery radio button show/hide based upon selected/checked

I have two sets of radio buttons and I want it so that based upon the checked/selected option from both sets to render a hidden div.

Also, I want it so that the defaults are selected (meaning already checked) and the default div should appear automatically. I've tried numerous ways to fix the jquery but I'm stuck. I know the problem lies there and would appreciate any help in resolving this.

http://jsfiddle.net/chapster82/EWTx7/1/

CSS
.charts {
display: none;
height: 200px;
width: 200px;
}
input[type="radio"] {
display: none;
}
.charttype {
height: 23px;
width: 120px;
border: 1pt outset #CCCCCC;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ff6666;
color: #FFF;
text-align: center;
font-size: 14px;
font-family: Corbel, "Corbel Bold";
cursor: pointer;
margin-bottom: 14px;
float: left;
padding-top: 7px;
}
.chartbutton {
height: 22px;
width: 66px;
border: 1pt outset #CCCCCC;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ff6666;
color: #FFF;
text-align: center;
font-size: 12px;
font-family: Corbel, "Corbel Bold";
cursor: pointer;
margin-bottom: 14px;
margin-right: 2px;
float: left;
padding-top: 8px;
}
.charttype:checked + label, .chartbutton:checked + label {
background-color: #F2F2F2;
border: 0.083em solid #CDCDCD;
color: #666;
}


jQuery
$(document).ready(function(){
if ($('#personal').is(':checked')) {
   $('.chartbutton').on('click', function(){
    var ID = $(this).attr('id'); 
    $('.charts').hide();
    $('#personal'+ ID).show();   
   });
} else 
    if ($('#employees').is(':checked')) {
     $('.chartbutton').on('click', function(){
      var ID = $(this).attr('id'); 
      $('.charts').hide();
      $('#employees'+ ID).show();   
   });
}
});


HTML
<input name="chart" class="charttype" type="radio" id="personal" checked="checked" />
<label class="charttype" for="personal">Personal</label>
<input name="chart" class="charttype" type="radio" id="employees" /><label class="charttype" for="employees">Employees</label>

<input name="chart1" class="chartbutton" type="radio" id="charta" checked /><label class="chartbutton" for="charta">Pie</label>
<input name="chart1" class="chartbutton" type="radio" id="chartb" /><label class="chartbutton" for="chartb">Bar</label>

<div class="charts" id="personalcharta">Chart 1</div> 
<div class="charts" id="employeescharta">Chart 2</div>
<div class="charts" id="personalchartb">Chart 3</div>
<div class="charts" id="employeeschartb">Chart 4</div>

Upvotes: 2

Views: 623

Answers (2)

struthersneil
struthersneil

Reputation: 2750

Here's how I would approach it:

function chartChange()
{
    $('.charts').hide();
    $('#' + $('.charttype:checked').first().attr('id') + 
            $('.chartbutton:checked').first().attr('id')).show();
}

$(document).ready(function()
{
    $('.charttype, .chartbutton').click(chartChange);
    chartChange();
});

Upvotes: 1

Sergio
Sergio

Reputation: 28845

Here is a suggestion:

$(document).ready(function () {
    $('input.chartbutton').on('click', function () {
        var ID = this.id;
        $('.charts').hide();
        $('#personal' + ID).show();
    });
    $('input.charttype').on('click', function () {
        var ID = this.id;
        $('.charts').hide();
        var chartbutton = $('input.chartbutton')[0].id;
        console.log(chartbutton);
        $('[id^="' + ID + chartbutton + '"]').show();
    });
});

Fiddle

Upvotes: 0

Related Questions