Jquery不捕获对单选按钮的取消检查。

Question

我正在建造一个多步骤的表格。

以下是其中的一部分：

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

这是我的JS：

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

问题是:使用复选框可以正常工作。在检查/取消选中复选框时显示和隐藏。有了单选按钮，它在节目中运行的很好，但它并不是隐藏在改变当前的单选按钮组。

这是JSFiddle

编辑1:我需要的是单选按钮组:如果我检查单选按钮

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

文本区域

id="id-of-textarea" 

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

name="radio_group_1" NO DATA-ATTRIBUTE HERE

文本区域隐藏。

Answer 1

jQuery逻辑是错误的。Working: https://jsfiddle.net/vutpcu0g/5

您应该检查所有无线电上的更改事件，而不仅仅是data-show广播。然后，选择最近的同级广播来切换数据显示元素。

$("[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();
  }
});

Answer 2

您的code.Use中有一些错误--这个脚本。

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

小提琴：https://codepen.io/smitraval27/pen/XEpGNR

在您的代码中，您没有将数据显示给每个单选按钮。另外，对于无线电的变化，你必须使用每一个，以了解每一个电台的变化。