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

- Saeed Abbaspour

---

你的单选按钮需要命名。通过添加checked属性来选择默认值。 - j08691

Answer 1

相关规范 - 17 表单 / 17.2.1 控件类型

单选框与复选框类似，不同之处在于当多个单选框共享相同的控件名称时，它们是互斥的：当一个被选中时，所有其他相同名称的单选框都会被取消选择。

因此，单选元素需要共享一个公共名称属性，以使它们互斥。

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

- Josh Crozier

---

谢谢Josh，你总是在问题上提供非常有帮助和全面的答案！ - Saeed Abbaspour