如何使單選按鈕看起來像一個切換按鈕

我正在嘗試像切換按鈕樣式的單選按鈕。我想跨瀏覽器做，所以我想jQuery是唯一的選擇（CSS3屬性：選中不是我的選項）如何使單選按鈕看起來像一個切換按鈕

我知道有很多已發佈的解決方案，但我不能直接使用它們中的任何一個，因爲我無法更改任何HTML代碼（它是由Drupal創建的）。

我試着去適應不同的解決方案，以我的HTML（如https://stackoverflow.com/a/9376041和CSS change active select for radio），但我不知道JavaScript，我無法使他們的工作。

我的HTML是：

<div id="edit-status" class="form-radios"> 
<div class="form-item form-type-radio form-item-status"> 
<input type="radio" id="edit-status-0" name="status" value="0" class="form-radio"/> 
<label class="option" for="edit-status-0">Bloqueado</label> 
</div> 
<div class="form-item form-type-radio form-item-status"> 
<input type="radio" id="edit-status-1" name="status" value="1" checked="checked" class="form-radio"/> 
<label class="option" for="edit-status-1">Activo</label> 
</div> 
</div>

如果有人能給我一個jQuery代碼我想明白了很多（我知道CSS，所以這部分是沒有問題的）。

編輯：我需要Jquery爲所選單選按鈕的標籤提供一個類，以便使其與未選定的單選按鈕的標籤風格不同。

來源

2012-12-13 user1901663

什麼是切換按鈕？ – Liam

你可以在我提供的鏈接的例子中看到它。示例的直接鏈接是http://jsfiddle.net/aS69U/和http://jsfiddle.net/RkvAP/230/ – user1901663

我很困惑至於你在這裏之後？我不明白這句話「我需要Jquery爲選定的單選按鈕的標籤提供一個類」。你能提供一個更好的解釋嗎？ – Liam

這是你想要的嗎？

http://jsfiddle.net/aS69U/7/

.form-radios { 
    display: block; 
    float: left; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    font-weight: bold; 
    text-transform: uppercase; 
    background: #eee; 
    border: 1px solid #aaa; 
    padding: 2px; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); 
    margin-left: 20px; 
} 

.form-radios input[type=radio] { 
    display: none; 
} 

.form-radios label  { 
    display: block; 
    float: left; 
    padding: 3px 6px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    color: #aaa; 
    cursor: pointer; 
} 

.form-radios label:hover { 
    text-shadow: 0 0 2px #fff; 
    color: #888; 
} 

.form-radios label.checked { 
    background: #8fc800; 
    color: #eee; 
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5); 
    background: -webkit-linear-gradient(top, #8fc800, #438c00); 
    background: -moz-linear-gradient(top, #8fc800, #438c00); 
    background: -ms-linear-gradient(top, #8fc800, #438c00); 
    cursor: default; 
}

來源

2012-12-13 17:42:43

嘿，您忘了添加'$（document）。準備好（函數（）{....代碼jquery在小提琴.....}）;'然後它會工作，不要忘記upvote這個答案！ –

是的，這就是問題所在（我是一個新手......）。現在它工作得很好，非常感謝！ – user1901663

現在照顧一下吧:)快樂編程;） –

大多數表單控件都是由操作系統渲染的，而不是瀏覽器。樣式radio,checkbox,file輸入和選擇options的能力是相當有限的。真正沒有可靠的跨瀏覽器方法來做你想做的事情，而不依賴於基於Javascript的解決方案。單靠CSS不能做你想做的事。

來源

2012-12-13 17:34:56

實際上，我已經在我的問題中提到CSS無法提供跨瀏覽器的解決方案（第一段），但是無論如何要花時間回答:) – user1901663

JS：

$('label.option').click(function(){ 
    $('.form-item input[type=radio]').attr('checked',null); 
    $('label.option').removeClass("checked"); 
    $(this).prev().attr('checked',"checked"); 
    $(this).addClass("checked"); 
})

CSS：

.form-item.form-type-radio.form-item-status{ 
    display:inline-block;   
} 

.form-type-radio input[type=radio] 
{ 
    display: none; 
} 

.checked{ 
    background:#F00; 
}

一言以蔽之。

http://jsfiddle.net/camus/pLfvS/

來源

2012-12-13 17:42:51 mpm

如何使單選按鈕看起來像一個切換按鈕

回答

相關問題