0

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

一些解决方案：

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

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

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

4

1 回答 1

0

您无需处理 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" />
于 2013-09-17T08:13:11.400 回答