JavaScript 和 radio_button in rails - 状态只检查一次

Javascript and radio_button in rails - status checked only once

本文关键字：检查 一次 状态 radio button rails in JavaScript      更新时间：2023-09-26

我尝试为我的图像放置单选按钮。当用户单击一个图像时，其他单选按钮应已选中设置为 false。现在我有这样的东西：

$('.image_choose').each( function() {
    $(this).click(function() {
            $('.image_choose').each( function() {
                $(this).attr("style","border:1px solid #e5e5e5");
                $(this).attr("id","in_active");
                $inputs = $(this).find('input[type="radio"]');
                $inputs.attr("checked", false);
            });
                 $label = $(this), $input = $(this).find('input[type="radio"]');
         $label.find('input').attr("checked", true); 
            });
     });

导轨：

<% @array_new.each do |a|%>
    <div class='image_containter'>
        <li class='image_choose'>       
        <%= f.radio_button :image_url ,a %>
                    </li>
            </div>
    <% end %>

所以正如我认为的那样 - 当用户单击image_choose元素时，首先对于我设置的 attr 并检查为 false的每个image_choose。然后对于$this元素将其更改为 true。这里面有什么问题？仅当第一次单击图像时，radio_button更改图形和状态。

一些解决方案：

我不认为这是这样做的好方法，但我发现：

$label.find('input').prop("checked", true); 
$label.find('input').attr("checked", true);

当我这样做时 - 它开始像它应该的那样工作。只有 .prop 没有设置输入 checked='checked'，只有 .attr 不会在第二次点击时更改单选按钮值......我不明白这里有什么问题。

你不需要处理Javascript就可以以这种方式使用单选按钮。

为

简化起见，请为列表中的每个单选按钮使用实际的 HTML <label>标记。单击该标签中的任意位置时，将触发单选按钮。只需确保通过标签的 ID 正确链接到单选按钮即可。

此外，请确保您的单选按钮 ID 始终是唯一的。所有单选按钮的 name 属性需要相同，以便浏览器知道它们是单选按钮组。

使用此 ERB（如果不是 100% 正确，请进行调整）：

<% @image_urls.each do |img| %>
    <%= f.label :image_url, img_tag(img) %>
    <%= f.radio_button :image_url, img %>
<% end %>

结果应如下所示：

<label for="image_url_your_img_val1">
    <img src="yourimage1.png"/>
</label>
<input type="radio" name="image_url" id="image_url_your_img_val1" value="your_img_val1"/>
<label for="image_url_your_img_val2">
    <img src="yourimage2.png"/>
</label>
<input type="radio" name="image_url" id="image_url_your_img_val2" value="your_img_val2" />
相关文章：