css - 以更简单的方式单选点击文本

Question

我使用了一个主题，它可以提供一个漂亮的 UI

代码有点脏，因为我需要为每个输入指定一个唯一的 id，

还有其他方法吗？

我用Haml写的

%input.ace{id: "radio_field_1", name: "radio_field[]", type: "radio", value: "1"}/
%label.lbl{for: "radio_field_1"} 
  radio option 1

%input.ace{id: "radio_field_2",name: "radio_field[]", type: "radio", value: "2"}/
%label.lbl{for: "radio_field_2"} radio option 2

%input.ace{id: "radio_field_3",name: "radio_field[]", type: "radio", value: "3"}/
%label.lbl{for: "radio_field_3"} radio option 3

HTML 输出

<input class="ace" id="radio_field_1" name="radio_field[]" type="radio" value="1">
<label class="lbl" for="radio_field_1">
      radio option 1
    </label>

Answer 1

你应该使用 rails form helper ，而不是纯 HTML，来创建您的表单:

- form_tag "/some_path" do
  - 3..times do |i| 
      = radio_button_tag 'radio_field', i, id: "radio_field_#{i}"
      = label_tag 'radio_field, 'radio button #{i}'

这应该有效 - 如果无效，将会有进一步的帮助