使用单选按钮动态显示和隐藏带有 jquery 的 div

Question

我在一个页面上有几个以下 HTML 实例：

<div class="input radio optional">
  <label class="collection_radio" for="warranty_selected_environments_attributes_1__destroy_false">
    <input checked="checked" class="radio optional" id="warranty_selected_environments_attributes_1__destroy_false" name="warranty[selected_environments_attributes][1][_destroy]" type="radio" value="false" />Yes
  </label>
  <label class="collection_radio" for="warranty_selected_environments_attributes_1__destroy_true">
    <input checked="checked" class="radio optional" id="warranty_selected_environments_attributes_1__destroy_true" name="warranty[selected_environments_attributes][1][_destroy]" type="radio" value="true" />No
  </label>
</div>

<div class="input numeric integer required">
  <label class="integer required" for="warranty_selected_environments_attributes_1_distance">Distance</label>
  <input class="numeric integer required" id="warranty_selected_environments_attributes_1_distance" name="warranty[selected_environments_attributes][1][distance]" required="required" size="50" step="1" type="number" />
</div>

这段代码是用 simple_form gem 生成的，所以我没有太多的控制权。它也是一种嵌套的属性形式，因此系统中的每个“环境”都有上述一组代码。我希望能够根据无线电组是真还是假来显示和隐藏文本输入“距离”。

我一直在试图找出一种观看广播组的方法，然后知道页面上要隐藏或显示哪个“距离”框。在这个阶段我能想到的最好的方法是使用名称值，去掉最后的 [_destroy] 部分并添加 [distance]。值得注意的是，以上所有内容都包含在每个列出的环境的 div 中。

为冗长的 HTML 道歉:)

Answer 1

哇，比我想象的要容易。 jquery 中方便的 close() 方法使这变得简单：

$(":radio").change(function () {
    $(this).closest('.section').children('.input.numeric').toggle(this.checked && this.value == 'false');
});