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

问题是什么：使用复选框它工作正常。显示和隐藏 checking/unchecking 复选框。使用单选按钮，它在节目中工作正常，但它不会隐藏从当前单选按钮组更改。

这里是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

你的 code.Use 这个脚本有一些错误。

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

Fiddle: https://codepen.io/smitraval27/pen/XEpGNR

在您的代码中，您没有为每个单选按钮提供 [data-show]。加上无线电的变化，你必须使用每个无线电来找出每个无线电的变化。

Answer 2

jQuery逻辑错误。 工作： https://jsfiddle.net/vutpcu0g/5

您应该检查所有收音机的更改事件，而不仅仅是 data-show 的。然后，select 最近的同级单选按钮切换 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();
  }
});

Jquery 没有捕捉到单选按钮的取消选中

Jquery does not catch unchecking of radio-button

javascript

forms

jquery

custom-data-attribute

bootstrap-4