html建立复选框,创建一个像html复选框一样的div

我一直在试图回答你的问题，我创建了一个小小的jQuery(1.5.2)代码。 希望这可以帮助你看看，并告诉我这是你在找什么？或者如果你想要别的东西我也可以做到。在这个脚本上点击一个div元素，其ID为on_off(你也可以通过使用var！来选择它)和class(on_off_on)和off(on_off_off)，以及你可以选择它们的方式，只需要到这个jsFiddle链接对于 live demo或者你可以看到下面的脚本 -

HTML -

ON

CSS -

div.on_off_off

{

background: rgb(150,110,120);

font-family: segoe ui;

font-size: 12px;

font-weight: bold;

padding: 5px 10px;

border: 3px solid rgb(180, 140, 150);

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

color: #fff;

display: inline;

}

div.on_off_on

{

background: rgb(110,150,120);

font-family: segoe ui;

font-size: 12px;

font-weight: bold;

padding: 5px 10px;

border: 3px solid rgb(140, 180, 150);

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

color: #fff;

display: inline;

}

jQuery代码 -

$(document.body).ready(function() {

$(function() {

var main_obj_id = 'on_off';

var on_class = 'on_off_on';

var off_class = 'on_off_off';

$('#' + main_obj_id).click(function() {

if ($(this).is('.' + on_class)) {

$(this).removeClass(on_class);

$(this).addClass(off_class);

$(this).html('OFF');

} else {

$(this).removeClass(off_class);

$(this).addClass(on_class);

$(this).html('ON');

}

});

});

});

希望这会有所帮助！