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

textarea隐藏。

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

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

Jquery没有取消选中单选按钮

2 个答案: