Question

我尝试为我的图像添加单选按钮。当用户单击一个图像时，其他单选按钮应该已设置为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元素时，首先为每个image_choose设置attr并检查为false。然后将$元素更改为true。这里有什么问题？只有在第一次点击图片时，radio_button才会更改图表和状态。

一些解决方案：

我不认为这样做很好，但我发现：

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

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

Answer 1

您无需以这种方式处理Javascript以使用radiobutton。

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

另外，请确保您的radiobutton 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" />

rails中的Javascript和radio_button - 状态仅检查一次

1 个答案: