使用單選按鈕作爲普通按鈕

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; 
    }