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

单选按钮就像复选框一样，只有当多个共享相同的控件名称时，它们是互斥的：当一个切换时＃34; on＆＃34;，所有其他名称相同的是切换＆＃34;关闭＆＃34;。

因此，无线电元素需要共享一个公共名称属性，以使它们互相排斥。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: