使用jQuery检查单选按钮后切换内容 [英] Toggle content after a radio button is checked using jQuery

问题描述

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

$（。option-detail）。hide（）; $（。选项）。click（function（）{$（this）.next（'div'）。slideToggle（this.checked）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min。 JS>< /脚本>< DIV> < UL> <李> < input type =radioclass =option>选项1< div class =option-detail>一些内容< / div> < /锂> <李> < input type =radioclass =option>选项2< div class =option-detail>一些内容在这里< / div> < /锂> <李> < input type =radioclass =option>选项3< div class =option-detail>一些内容< / div> < /锂> < / div>< / div>  

解决方案

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

单选按钮与复选框类似，但几个共享相同的控制名称，它们是互斥的：当一个开关打开时，所有其他具有相同名称的开关都将关闭。

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

 < input type =radioname =groupclass =option> 
  

  $（'： （'。option-detail'）。slideUp（）; 
 $（this）.parent（'label'）。next（'change'，function（）{
 $ 'div'）。slideToggle（this.checked）; 
}）; 
  

我所做的更改：

• 为了提高可用性，我用标签元素包装了元素元素。为此，您现在可以单击文本或单选按钮以触发更改事件。 我将事件从更改为单击 to change 。


• 我滑动了所有 .option-detail 每次发生事件时都会添加元素。在此过程中，一次只显示一个。

如果您希望默认选择单选按钮，请添加检查属性。

 < input type =radioname = groupclass =optionchecked> 
  

或

 < input type =radioname =groupclass =optionchecked =checked> 
  

$（。option-detail）。hide（）; $ （'：input'）。on（'change'，function（）{$（。option-detail）。slideUp（）; $（this）.parent（'label'）。next（'div'）。 < / code> script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div> < UL> <李> < label>< input type =radioname =groupclass =optionchecked> Option 1< / label> < div class =option-detail>一些内容在这里< / div> < /锂> <李> < label>< input type =radioname =groupclass =option>选项2< / label> < div class =option-detail>一些内容在这里< / div> < /锂> <李> < label>< input type =radioname =groupclass =option>选项3< / label> < div class =option-detail>一些内容在这里< / div> < /锂> < / div>

How can I fix the issue? I would like to toggle the content of the each radio button if it's selected. Also how could I set the default selected radio button?

$(".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>

解决方案

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

Thus, the radio elements need to share a common name attribute in order for them to be mutually exclusive.

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

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

Changes I made:

• I wrapped the input elements with label elements in order to increase usability. In doing so, you can now click on the text or the radio button in order to trigger a change event.
• I changed the event from click to change.
• I slided all the .option-detail elements up each time an event is fired. In doing so, only one is displayed at once.

If you want a radio button to be selected by default, add the checked attribute to it.

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

or

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

这篇关于使用jQuery检查单选按钮后切换内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！