Rails радио да / нет кнопки, чтобы показать больше полей

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).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(), вам не нужно помещать его в готовую функцию.

В любом случае, я бы советовал не помещать этот тип кода, а заключать его в какую-то управляемую среду.Например, при помощи activulus.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, все будет работать.

Answer 2

Попробуйте что-то вроде этого.

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