jquery - 如何同时使标签和单选按钮可见/不可见并具有切换幻灯片功能？

Question

给定一个表格行中的复选框，以及下一个表格行上的三个单选按钮。加载页面时，单选按钮是不可见的。

如何创建一个单击功能，可以使单选按钮可见以及上滑下滑效果？

<td>
<input type="checkbox" id="appalert" name="appalert" value="appalert"  onclick="toggleRadioButtonPanel(this);"> alert
</td>

<td>
<label class="alertTypePanel" style="visibility: hidden">alertType: </label>
<input type="radio" name="alertTypeOpt" id="alertTypeOpt1" class="alertTypePanel" value="Ticker" style="visibility: hidden">
<label class="alertTypePanel" style="visibility: hidden" style="visibility: hidden">Ticker</label>
<input type="radio" name="alertTypeOpt" id="alertTypeOpt2" class="alertTypePanel" value="Pop up" style="visibility: hidden">
<label class="alertTypePanel" style="visibility: hidden">Pop up</label>
</td>

Answer 1

<td>
    <input type="checkbox" id="appalert" name="appalert" value="appalert" class="appalert"> alert
</td>

<td>
  <div class="toggle" style="display:none;">
    <label class="alertTypePanel">alertType: </label>
    <input type="radio" name="alertTypeOpt" id="alertTypeOpt1" class="alertTypePanel" value="Ticker">
    <label class="alertTypePanel">Ticker</label>
    <input type="radio" name="alertTypeOpt" id="alertTypeOpt2" class="alertTypePanel" value="Pop up">
    <label class="alertTypePanel">Pop up</label>
  </div>
</td>

$('.appalert').click(function(){
    $(this).parent().next('td').find('.toggle').slideToggle();
});

Answer 2

尝试这个

演示

$('#appalert').click(function(){
   $('label, input:radio').toggleClass('alertTypePanel').slideToggle();
});​​​​

<table>
<tr>
<td>
<input type="checkbox" id="appalert" name="appalert" value="appalert" > alert
</td>

<td>
 <label class="alertTypePanel" >alertType: </label>
 <input type="radio" name="alertTypeOpt" id="alertTypeOpt1" class="alertTypePanel"     value="Ticker" >
<label class="alertTypePanel" >Ticker</label>
<input type="radio" name="alertTypeOpt" id="alertTypeOpt2" class="alertTypePanel" value="Pop up" >
<label class="alertTypePanel" >Pop up</label>
</td>
</tr></table>

.alertTypePanel{
 display:none;
}​