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

Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".

因此，radio 元素需要共享一个共同的名称属性，以便它们相互排斥。

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

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

我所做的更改:

• 我用 label 元素包装了 input 元素以提高可用性。为此，您现在可以单击文本或单选按钮以触发更改事件。
• 我将事件从 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>