嵌套表单中单选按钮的 OnChange 事件

Posted 2023-05-09

【中文标题】嵌套表单中单选按钮的 OnChange 事件

【英文标题】：OnChange event for radio button in nested form rails

【发布时间】：2020-11-07 12:59:27

【问题描述】：

我正在开发 Ruby on Rails 应用程序。现在我想在我的active-admin 嵌套表单中为单选按钮获取 OnChange 事件

##form code
.......
........
<% f.has_many :scheduler, new_record: false do |s| %>
      <%- s.input :occurance_type, as: :radio, :collection => Scheduler.occurance_types.keys %>
........

检查过的 html 代码 :-

<li class="radio input optional" id="property_promotion_scheduler_attributes_occurance_type_input">
  <fieldset class="choices">
    <legend class="label">
      <label>Occurance type</label>
    </legend>
    <ol class="choices-group">
      <li class="choice">
        <label for="property_promotion_scheduler_attributes_occurance_type_one_time">
          <input id="property_promotion_scheduler_attributes_occurance_type_one_time" type="radio" value="One Time" checked="checked" name="property_promotion[scheduler_attributes][occurance_type]">One Time
        </label>
      </li>
      <li class="choice">
        <label for="property_promotion_scheduler_attributes_occurance_type_recurring">
          <input id="property_promotion_scheduler_attributes_occurance_type_recurring" type="radio" value="Recurring" name="property_promotion[scheduler_attributes][occurance_type]">Recurring
        </label>
      </li>
    </ol>
  </fieldset>
</li>

我尝试了以下代码，但在浏览器控制台中出现语法错误：-

$('input[type=radio][name=property_promotion[scheduler_attributes][occurance_type]]').change(function() 
    alert("Radio button changed");
);

有人可以建议我参加这个活动吗？

【参考方案1】：

您必须将 name 的值放在引号中，以表明 [] 是字符串的一部分，如下面的演示所示：

$('input[type=radio][name="property_promotion[scheduler_attributes][occurance_type]"]').change(function() 
    alert("Radio button changed");
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="radio input optional" id="property_promotion_scheduler_attributes_occurance_type_input">
  <fieldset class="choices">
    <legend class="label">
      <label>Occurance type</label>
    </legend>
    <ol class="choices-group">
      <li class="choice">
        <label for="property_promotion_scheduler_attributes_occurance_type_one_time">
          <input id="property_promotion_scheduler_attributes_occurance_type_one_time" type="radio" value="One Time" checked="checked" name="property_promotion[scheduler_attributes][occurance_type]">One Time
        </label>
      </li>
      <li class="choice">
        <label for="property_promotion_scheduler_attributes_occurance_type_recurring">
          <input id="property_promotion_scheduler_attributes_occurance_type_recurring" type="radio" value="Recurring" name="property_promotion[scheduler_attributes][occurance_type]">Recurring
        </label>
      </li>
    </ol>
  </fieldset>
</li>
</ol>

或者您可以使用 radios' 祖先来简化选择器，如下面的演示所示：

'ol.choices-group :radio'

$('ol.choices-group :radio').change(function() 
    alert("Radio button changed");
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="radio input optional" id="property_promotion_scheduler_attributes_occurance_type_input">
  <fieldset class="choices">
    <legend class="label">
      <label>Occurance type</label>
    </legend>
    <ol class="choices-group">
      <li class="choice">
        <label for="property_promotion_scheduler_attributes_occurance_type_one_time">
          <input id="property_promotion_scheduler_attributes_occurance_type_one_time" type="radio" value="One Time" checked="checked" name="property_promotion[scheduler_attributes][occurance_type]">One Time
        </label>
      </li>
      <li class="choice">
        <label for="property_promotion_scheduler_attributes_occurance_type_recurring">
          <input id="property_promotion_scheduler_attributes_occurance_type_recurring" type="radio" value="Recurring" name="property_promotion[scheduler_attributes][occurance_type]">Recurring
        </label>
      </li>
    </ol>
  </fieldset>
</li>
</ol>

【讨论】：

很高兴这对您有所帮助。