Question

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

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

另外，我想要它以便选择默认值（意味着已经选中）并且默认div应该自动出现。我已经尝试了很多方法来修复jquery但是我被卡住了。我知道问题就在那里，并希望有任何帮助解决这个问题。

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>

Answer 1

以下是我如何处理它：

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

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

Answer 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();
    });
});

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

2 个答案:

Fiddle