2

ラジオ ボタンのセットが 2 つあり、両方のセットからチェック/選択されたオプションに基づいて、非表示の div をレンダリングするようにします。

  • セット 1 のオプション 1 がセット 2 のオプション 1 と共に選択された場合、div がレンダリングされます。
  • セット 1 のオプション 2 がセット 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>
4

2 に答える 2

0

ここに提案があります：

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

フィドル

于 2013-10-21T19:02:08.687 に答える