Rails单选按钮是用来显示更多字段的吗？（是/否）

Question

我有一个带有是或否 单选按钮 的item.rb模型：

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

并且在视图中：

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

如果我点击是，我希望更多的字段显示出来，这些字段我已经准备好了：

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

我正在尝试使用以下JavaScript实现这个目标：

  <script type="text/javascript">

      function yesnoCheck() {
          if (document.getElementById('yesCheck').checked) {
              document.getElementById('ifYes').style.display = 'block';
          }
          else document.getElementById('ifYes').style.display = 'none';

      }

  </script>

使用此代码，但没有发生任何事情：

<%= f.collection_radio_buttons :stock, Item.stock, :first, :first, onclick:"javascript:yesnoCheck();", :id=>"yesCheck" %>

有什么办法可以让这个工作吗？

更新1

现在我正在做这件事，当我点击“是”或“否”时，<div id="ifYes" style="display:none;"></div>内的内容会显示出来。

<%= f.collection_radio_buttons :stock, Item.stock, :first, :first, onChange:"getValue(this)" %>



 <script type="text/javascript">

      $(document).ready(function(getValue){
          $("input[type=radio]").change(function(){
              $('#ifYes').show();
          });
      });

  </script>

但是如果我点击“否”，如何隐藏这些字段？

- Dev

---

或许你应该尝试使用 onChange。 - Jack Ashton

谢谢回复@Jack Ashton！我有点新手……如何使用上述代码来实现onCharge函数？ - Dev

就像 onclick 一样简单，我认为只需要将 onclick:"javascript:yesnoCheck();" 更改为 onchange:"javascript:yesnoCheck();" 即可。 - Jack Ashton

那么JavaScript呢，我应该使用哪一个？ - Dev

你是什么意思？你可以使用你的函数 yesnoCheck()，看起来没问题。 - Jack Ashton

我正在进行以下操作 <%= f.collection_radio_buttons :stock, Item.stock, :first, :first, onchange:"javascript:yesnoCheck();", :id=>"yesCheck" %>，如果我检查单选按钮的元素以检查ID是否为 yesCheck，我会得到 item_stock_yes。 - Dev

Answer 1

您有两个单选按钮，可能被选中或未选中。您只需要选择已选中的那一个：

$(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()，则不需要将其放在ready函数中。

我仍然建议不要编写此类型的代码，而是将其封装到某个受管理的框架中。例如，使用stimulus.js，您可以执行以下操作（一次性在主应用程序JS中进行）：

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>

这样，你可以使用“显示/隐藏”行为来处理许多其他情况，只需添加适当的data-controller、data-action和data-target属性，一切都会正常工作。

- rewritten

Answer 2

尝试像这样做一些事情。

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

- jedi

---

谢谢您的回复，@jedi... 您能否请检查我的问题，我现在有一个更新！ - Dev

相同，只需说 $（'your-element'）.hide（）; - jedi

谢谢@jedi!! 我给单选按钮添加了两个不同的id，并创建了一个脚本来隐藏其中一个并显示另一个。 - Dev