jQuery单选按钮根据选择/选中显示/隐藏

user2004710 发表于 Dev

user2004710

我有两套单选按钮，我想要它，以便基于两套检查/选定的选项来呈现隐藏的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>

施特雷弗尼尔

这是我的处理方法：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。