使用jQuery检查单选按钮后切换内容

Question

如何解决该问题？我想切换每个单选按钮的内容，如果它被选中。另外我怎么能设置默认选定的单选按钮？

$(".option-detail").hide(); 
 
$(".option").click(function() { 
 
    $(this).next('div').slideToggle(this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li> 
 
     <input type="radio" class="option">Option 1 
 
     <div class="option-detail">Some content here</div> 
 
    </li> 
 
    <li> 
 
     <input type="radio" class="option">Option 2 
 
     <div class="option-detail">Some content here</div> 
 
    </li> 
 
    <li> 
 
     <input type="radio" class="option">Option 3 
 
     <div class="option-detail">Some content here</div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Relevant Spec - 17 Forms/17.2.1 Control types

收音机按钮类似，只是该复选框时几个共享相同的控制名，它们是相互排斥的：当一个被 “接通”，所有其他具有相同名称的人都将被关闭。

因此，无线电元件需要共享通用名称属性以使它们互相排斥。

<input type="radio" name="group" class="option"> 

$(':input').on('change', function() { 
    $(".option-detail").slideUp(); 
    $(this).parent('label').next('div').slideToggle(this.checked); 
}); 

变化我提出：

• 我包裹input元件与label元件，以便提高可用性。这样做，您现在可以单击文本或单选按钮以触发更改事件。
• 我将活动从click更改为change。
• 每次发生事件时，我都会滑动所有.option-detail元素。这样做，一次只显示一个。

如果您希望默认选择单选按钮，请将checked属性添加到该属性中。

<input type="radio" name="group" class="option" checked> 

或

<input type="radio" name="group" class="option" checked="checked"> 

$(".option-detail").hide(); 
 

 
$(':input').on('change', function() { 
 
    $(".option-detail").slideUp(); 
 
    $(this).parent('label').next('div').slideToggle(this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li> 
 
     <label><input type="radio" name="group" class="option" checked>Option 1</label> 
 
     <div class="option-detail">Some content here</div> 
 
    </li> 
 
    <li> 
 
     <label><input type="radio" name="group" class="option">Option 2</label> 
 
     <div class="option-detail">Some content here</div> 
 
    </li> 
 
    <li> 
 
     <label><input type="radio" name="group" class="option">Option 3</label> 
 
     <div class="option-detail">Some content here</div> 
 
    </li> 
 
    </ul> 
 
</div>