Javascript Jquery无法捕获单选按钮的取消选中

我正在构建一个多步骤表单

这是其中的一部分：

<div class="form-group">
  <div class="form-check">
    <input id="1-1" class="form-check-input" type="radio" name="firstRadioGroup">
    <label for="1-1">Radio button 1-1</label>
  </div>
  <div class="form-check">
    <input id="1-2" class="form-check-input" type="radio" name="firstRadioGroup" data-show="#textarea-1">
    <label for="1-2">Radio button 1-2</label>
  </div>
</div>

<div class="form-group">
  <textarea name="textarea-1" id="textarea-1" cols="30" rows="10" style="display: none"></textarea>
</div>

<div class="form-group">
  <div class="form-check">
    <input id="2-1" class="form-check-input" type="radio" name="secondRadioGroup">
    <label for="2-1">Radio button 2-1</label>
  </div>
  <div class="form-check">
    <input id="2-2" class="form-check-input" type="radio" name="secondRadioGroup" data-show="#textarea-2">
    <label for="2-2">Radio button 2-2</label>
  </div>
</div>

<div class="form-group">
  <textarea name="textarea-2" id="textarea-2" cols="30" rows="10" style="display: none"></textarea>
</div>

<div class="form-group">
  <div class="form-check">
    <input id="checkbox-1" class="form-check-input" type="checkbox" name="secondRadioGroup">
    <label for="checkbox-1">Checkbox 1</label>
  </div>
  <div class="form-check">
    <input id="checkbox-2" class="form-check-input" type="checkbox" name="secondRadioGroup">
    <label for="checkbox-2">Checkbox 2</label>
  </div>
  <div class="form-check">
    <input id="checkbox-other" class="form-check-input" type="checkbox" name="secondRadioGroup"  data-show="#textarea-3">
    <label for="checkbox-other">Other</label>
  </div>
</div>

<div class="form-group">
  <textarea name="textarea-3" id="textarea-3" cols="30" rows="10" style="display: none"></textarea>
</div>

问题是： 使用复选框，它工作正常。选中/取消选中复选框时显示和隐藏。 对于单选按钮，它可以在节目中正常工作，但它不会隐藏对当前单选按钮组的更改

这是

编辑1： 我需要单选按钮组： 如果我将单选按钮与

name="radio_group_1" data-show="#id-of-textarea"

带有

id="id-of-textarea" 

出现了。如果在此之后，我检查同一组中的另一个单选按钮

name="radio_group_1" NO DATA-ATTRIBUTE HERE

---

文本区域隐藏

代码中有一些错误。请使用此脚本

$("[type='radio']").change(function(){
$("[type='radio']").each(function(){
 if($(this).is(":checked")) {
    $($(this).data('show')).show();
  } else {
    $($(this).data('show')).hide();
  }
  });
});

小提琴：

---

在您的代码中，您没有为每个单选按钮提供[数据显示]。另外，在更改收音机时，您必须使用each来查找每个收音机的更改。

您的代码中有一些错误。请使用此脚本

$("[type='radio']").change(function(){
$("[type='radio']").each(function(){
 if($(this).is(":checked")) {
    $($(this).data('show')).show();
  } else {
    $($(this).data('show')).hide();
  }
  });
});

小提琴：

---

在您的代码中，您没有为每个单选按钮提供[数据显示]。另外，在更改收音机时，您必须使用each来查找每个收音机的更改。

jQuery逻辑是错误的工作：

您应该检查所有收音机上的更改事件，而不仅仅是

数据显示

收音机。然后，选择最近的同级电台以切换数据显示元素

$("[type=radio],[type=checkbox]").change(function(){

    if($(this).is(":checked") && $(this).data("show")) {
    $($(this).data('show')).show();
  } else {
    var sib= $(this).parents('.form-group').find('[data-show]');
    $(sib.data("show")).hide();
  }
});

---

jQuery逻辑是错误的工作：

您应该检查所有收音机上的更改事件，而不仅仅是

数据显示

收音机。然后，选择最近的同级电台以切换数据显示元素

$("[type=radio],[type=checkbox]").change(function(){

    if($(this).is(":checked") && $(this).data("show")) {
    $($(this).data('show')).show();
  } else {
    var sib= $(this).parents('.form-group').find('[data-show]');
    $(sib.data("show")).hide();
  }
});

---

请在下面检查我的答案是否工作正常。请在下面检查我的答案是否工作正常。谢谢，现在可以了。非常感谢您的解释！谢谢，现在有了，非常感谢你的解释！