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逻辑是错误的。 工作： 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

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

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

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