0

http://jsfiddle.net/4QZED/6/。尝试为选中的未选中和悬停/鼠标悬停的收音机创建 3 种状态。每个关闭状态都是 css/div/button。但试图使标签成为按钮，以将标签文本保留在按钮中。

更喜欢 css 而不是 jpg 以避免页面缩放时图像降级。

$(function() {
    $("input[name='domain_ext']").each(function() {
        if ($(this).prop('checked')) {
            $(this).hide();
            $(this).after("<div class='radioButtonOff'> label </div>");
        } else { 
            $(this).hide();
            $(this).after("<div class='radioButtonOff'> label </div>");
        }
    });

    $("input[type=radio]").change(function() {
        $(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
    });

        /*  
 $(".radioButtonOff").mouseover(function() {
       if ($(this)toggle('.radioButtonHover');
    });

  $("input[type=label]").change(function() {
         if($(this).find('#radiolabel');
            $(this).hide();
            $(this).after("input[type=label]").add(span);
         });
*/

});
4

2 回答 2

2

更改 jQuery 以简单地从标签中提取文本并将其添加到动态附加的 div 中。

编辑：我意识到您对已检查状态的 if/else 语句毫无意义，因为它根本没有根据条件改变任何内容。您可能有其他计划，但根据发布的示例，您可以完全取消 jQuery 的第一部分。我对下面的 jquery 代码做了一个小的编辑。

 $("input[name='domain_ext']").each(function() {
    var lbl = $(this).parent("label").text();
    if ($(this).prop('checked')) {
        $(this).hide();
        $(this).after("<div class='radioButtonOn'>" + lbl + "</div>");
        // something else here if radio is checked??
    } else { 
        $(this).hide();
        $(this).after("<div class='radioButtonOff'>" + lbl + "</div>");
    }
});

向标签 HTML 添加了一个跨度以隐藏文本。

<label>
  <input type="radio" name="domain_ext" value="all"  />
    <span>All</span></label>

更改了 CSS 以允许悬停状态工作并隐藏标签文本。

.radioButtonOff { width: 60px; height: 20px; color: #fff; background: #333333;}
.radioButtonOff:hover, .radiobuttonOn:hover { width: 60px; color: #fff;height: 20px; background: #00a;}
.radioButtonOn { width: 60px; height: 20px; color: #fff;background: #a00;}
label span { display: none;}

在这里更新小提琴

于 2013-03-12T03:39:05.010 回答
2

能够让这个 css 在 Chrome 中工作。没有在其他浏览器中测试，但应该不错。

label {position:relative; width:60px; height:20px; display:inline-block; line-height:20px; text-align:center;}
.radioButtonOff,.radioButtonHover,.radioButtonOn { width:100%; height:100%; position:absolute; z-index:-1; }
.radioButtonOff { background: #333333;}
.radioButtonHover { background: #666666;}
.radioButtonOn { background: #999999;}

示例：http: //jsfiddle.net/P9m7q/

于 2013-03-12T03:51:00.990 回答