Question

我正在尝试设置单选按钮，如切换按钮。我想跨浏览器做，所以我猜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为所选单选按钮的标签提供一个类，以便将其设置为与未选中单选按钮的标签不同。

Answer 1

这是你想要的吗？

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

Answer 2

大多数表单控件由操作系统呈现，而不是浏览器。样式radio，checkbox，file输入和选择options的功能非常有限。确实没有可靠的跨浏览器方法来做你想要的，而不需要求助于基于Javascript的解决方案。单靠CSS无法做到你想要的。

Answer 3

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/

如何使单选按钮看起来像切换按钮

3 个答案: