Question

我想让单选按钮表现得像按钮

这是我的HTML

<div class="options">
<label><span class="label">options</span>
 <abbr class="required" title="required">*</abbr>
 </label>
<ul>
    <li>
<input type="radio" value="option1" checked="checked" name="radio_option1" id="option1" class="checkout_field"> optionA
    </li>

    <li>
<input type="radio" value="option2" name="radio_option1" id="option2" class="checkout_field"> OptionB
   </li>

   <li>
<input type="radio" value="option3" name="radio_option1" id="option3" class="checkout_field"> OptionC

  </li>
</ul>
</div>

和css

.options ul {
    list-style-type:none;
    margin:25px 0 0 0;
    padding:0;
}

.options li {
    float:left;
    margin:0 5px 0 0;
}

.options li {
    padding:5px;
    cursor:pointer;
    -webkit-appearance: button;
    /* WebKit */
    -moz-appearance: button;
    /* Mozilla */
    -o-appearance: button;
    /* Opera */
    -ms-appearance: button;
    /* Internet Explorer */
    appearance: button;
    /* CSS3 */
}

input[type=radio] {
    display:none
}

如果我将输入的显示设置为“in-line”，但显示属性设置为“none”则不起作用。

请注意，我无法更改上面的html标记，因为它是在其他地方生成的。

这里是相同的codepen链接 https://codepen.io/anon/pen/XRbQJO

Answer 1

你可以试试这个：

$('.options li').click(function() {
  $(this).find('input[type="radio"]').prop('checked', true);
});

<强> pen

Answer 2

你可以通过添加一些jQuery来处理<li>周围无线电的点击。

$(':radio').parent('li').on('click', function() {
  $(this).find(':radio').prop('checked', 'checked');
  alert($(':radio:checked').attr('id'));
});

Updated Codepen

Answer 3

这可能很有用

    input[type="radio"] {
      opacity:0;
      width:100%;
      position:absolute;
    }

使用单选按钮作为普通按钮

3 个答案: