Css 收音机以更简单的方式点击文本

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

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

还有别的办法吗

我用哈姆语写的

%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>

单选方案1

您应该使用rails而不是纯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}'

---

这应该会起作用-如果它不熟悉HAML，将有进一步的帮助，但是您可以通过

标签
元素包装
输入
。但是如果我的单选文本
单选选项X
脏了怎么办？您可以更改它们，没有问题！我只想离开你在问题中发布的内容——如果你更新了实际的细节，我将能够更新我的答案：）