单选按钮空格和检查

Question

我有以下代码，有三个问题。第一个是，我希望在观看时有4,8,16和24之间的空间。第二个问题是，我希望单选按钮被选中时进行检查。最后一个是，我希望它最初检查8小时作为默认值。谢谢。

h4
    .span3 Site Name: #{@site.site_code}
    span.pull-right Capacity Reserve Left: #{capacity_left}
    .span6 
      | Reserve Hours Required: 
      .input-group
        span.input-group-addon
          form#hours_select method="get"
            input type="radio" name="hours" id="res4" value="4"
            | 4
            input type="radio" name="hours" id="res8" value="8"
            | 8
            input type="radio" name="hours" id="res16" value="16"
            | 16
            input type="radio" name="hours" id="res24" value="24"
            | 24
javascript:
  $('input[name="hours"]').change(function() {
    //window.location = window.location + "?hours=" + $('input[name="res"]').val()
    $('#hours_select').submit()
  })

Answer 1

我将把单选框标签放入label标签中。这有助于解决前两个问题:

问题1:样式标签添加padding-right。

问题2:使用"for"属性。例如，在HTML中:

<input type="radio" name="hours" id="res24" value="24" /><label for="res24">24</label>

通过点击"24"标签，您现在可以选中/取消选中单选框。

问题3:只需向输入添加一个"checked"属性(参见http://www.w3schools.com/tags/att_input_checked.asp)。例子:

 <input type="radio" name="hours" id="res8" value="8" checked />

Answer 2

我很确定你的前两个问题是样式问题。在您的CSS中，使用padding或input[type=radio]或input[name="hours"]的空白来分隔您的无线电。

我不确定你说的"被选中"是什么意思，但如果你的意思是你想让它看起来像一个复选框而不是一个单选按钮，那是一个样式的东西，你可能可以用谷歌搜索一下。一个stackoverflow的答案是:你能把html单选按钮设计成一个复选框吗?

使8为默认值，只需添加checked="checked"，如下所示:

input type="radio" name="hours" id="res8" value="8" checked="checked"
        | 8