Javascript Rails单选yes/no按钮可显示更多字段

我有一个

item.rb型号

，带有是或否

单选按钮

：

enum stock: { "No": "1", "Yes": "2" }

并且认为：

<%= f.collection_radio_buttons :stock, Item.stock, :first, :first %>

如果我点击yes，我想显示更多的字段，我在这里面有：

<div id="ifYes" style="display:none">
</div

试试这样的

$(document).ready(function(){
  $('your-element').click(function(){
    $('ifYes').show();
  })
})

您有两个单选按钮，可以选中或不选中。您只需选择选中的一个：

$(document).change('input[type=radio][name="foo[stock]"]', function(){
  var selection = document.querySelector('input[type=radio][name="foo[stock]"]:checked');
  $('#ifYes').toggle(selection.value === 'Yes');
});

如果将选择器作为参数放入
$（document）.change（）
中，则无需将其放入就绪函数中

无论如何，我建议不要使用这种类型的代码，而是将其封装到某个托管框架中。例如，使用stimulus.js，您可以执行以下操作（在主应用程序js中一次性完成）：

然后，每当需要显示/隐藏行为时：

<div data-controller="shower">
  <label>Yes <input type="radio" name="foo" value="Yes" data-action="shower#toggle"></label>
  <label>No <input type="radio" name="foo" value="No" data-action="shower#toggle"></label>
  <div data-target="shower.detail" style="{display: none}">
    Anything
  </div>
</div>


对
不
任何东西

通过这种方式，您可以在许多其他情况下使用“显示/隐藏”行为，只需添加适当的数据控制器、数据操作和数据目标属性，一切都将正常工作。
也许您应该尝试
onChange
感谢您的帮助reply@Jack阿什顿！我是个新手。。。我怎样才能用我试图用上述代码实现的功能来实现
onCharge
函数呢？就像
onclick
一样简单，我想，只要把
onclick:“javascript:yesnoCheck（）；”
改为
onchange:“javascript:yesnoCheck（）；”
那javascript呢，我应该用哪一个？什么意思？你可以使用你的函数
yesnoCheck（）
，看起来不错，谢谢@jedi。。。你能检查一下我的问题吗，我现在有最新消息了！相同，但只需说出
$（'your-element'）.hide（）谢谢@jedi！！我在单选按钮中添加了两个不同的id，并创建了一个要隐藏的脚本和另一个要显示的脚本
$(document).ready(function(){
  $('your-element').click(function(){
    $('ifYes').show();
  })
})

$(document).change('input[type=radio][name="foo[stock]"]', function(){
  var selection = document.querySelector('input[type=radio][name="foo[stock]"]:checked');
  $('#ifYes').toggle(selection.value === 'Yes');
});

window.Application = Stimulus.Application.start()

class ShowerController extends Stimulus.Controller {
  static get targets() { return ['detail'] }

  toggle(event) {
    switch (event.target.value) {
      case 'Yes':
        this.detailTarget.style.display = '';
        break;
      case 'No':
        this.detailTarget.style.display = 'none';
        break;
      default:
        console.warn("Unexpected value", event.target.value)
    }
  }
}

window.Application.register('shower', ShowerController);

<div data-controller="shower">
  <label>Yes <input type="radio" name="foo" value="Yes" data-action="shower#toggle"></label>
  <label>No <input type="radio" name="foo" value="No" data-action="shower#toggle"></label>
  <div data-target="shower.detail" style="{display: none}">
    Anything
  </div>
</div>