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

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> s的无线电。

$(':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; 
    }