Question

我有一个item.rb model是或否radio buttons：

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>

但是如果我单击否，如何隐藏字段？

Answer 1

尝试这样的事情。

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

Answer 2

您有两个单选按钮，可能会被选中。您只需要选择已选中的一项即可：

$(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中）：

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>

通过这种方式，您可以在许多其他情况下使用“显示/隐藏”行为，只需添加适当的数据控制器，数据操作和数据目标属性，一切都将起作用。

Rails单选按钮是/否按钮以显示更多字段

2 个答案: