jQuery单选按钮显示/隐藏基于选中/选中答案

【问题标题】：jQuery radio button show/hide based upon selected/checkedjQuery单选按钮显示/隐藏基于选中/选中
【发布时间】：2013-10-30 09:36:36
【问题描述】：

我有两组单选按钮，我想要它，以便根据两组中选中/选择的选项来呈现隐藏的 div。

如果选择了 set 1 中的选项 1 以及 set 2 中的选项 1，则应呈现 div。
如果选择了 set 1 中的选项 2 以及 set 2 中的选项 1，则应呈现不同的 div，依此类推。

另外，我希望它选择默认值（意味着已经检查）并且默认 div 应该自动出现。我尝试了多种方法来修复 jquery，但我被卡住了。我知道问题出在那儿，并希望在解决此问题方面提供任何帮助。

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>

【问题讨论】：

标签： jquery radio-button show-hide

【解决方案1】：

以下是我的处理方式：

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

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

【讨论】：

【解决方案2】：

这是一个建议：

$(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

【讨论】：