如何使用JQuery创建切换按钮

看看这个JSFiddle代码是否对您有帮助。

<p><b>Disclaimer:</b> Due to a webkit bug involving pseudo classes and sibling selectors this may not work in some webkit-based browsers.</p>
<p>Here's our finished toggle button.</p>
<label id="label">
     <input type="checkbox" id="checkbox" />
     <span id="off">Off</span>
     <span id="on">On</span>
</label>
<p>Here's how we build it. First you start off with a label containing a checkbox and two spans.</p>
<label id="label">
    <input type="checkbox" />
    <span>Off</span>
    <span>On</span>
</label>
<p>Simple and not much to look at. Let's style those two spans to look like buttons and hide the checkbox.</p>
<label id="label">
    <input type="checkbox" id="checkbox" />
    <span id="off">Off</span>
    <span id="on" style="display:block;">On</span>
</label>
<p>Now, the key is to hide the "On" span initially with "display: none;". Then we show it when the checkbox is checked while hiding the "Off" span at the same time. This is done with this CSS:</p>
<pre>
#checkbox:checked + #off {
    display: none;
}
#checkbox:checked + #off + #on {
    display: block;
}
</pre>
<p>So, when the checkbox is checked we are targeting its sibling "off" and we are also targeting the sibling of the checkbox's sibling which is "on".</p>
<p>At this point you could use server-side code or javascript to react to the hidden checkbox being checked just like you would with a normal checkbox.</p>
​
p {
    margin: 10px;
}
pre {
    margin: 10px;
}
#label {
    cursor: pointer;
    display: block;
    margin: 20px auto;
    width: 200px;
}
#checkbox {
    display: none;
}
#checkbox:checked + #off {
    display: none;
}
#checkbox:checked + #off + #on {
    display: block;
}
#off {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);
    border: 2px solid #cf0404;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    color: white;
    display: block;
    font: 1em "Amaranth", sans-serif;
    padding: 4px 10px;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#on {
    background: #b4ddb4;
    background: -moz-linear-gradient(top,  #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400));
    background: -webkit-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
    background: -o-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
    background: -ms-linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
    background: linear-gradient(top,  #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
    border: 2px solid #002400;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    color: white;
    display: none;
    font: 1em "Amaranth", sans-serif;
    padding: 4px 10px;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
​