使用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>