【jQuery】コピペOK！　on/offスイッチ｜雑なUIと整合性が取れるチェックボックストグルボタン３つ！

ツイッターでこの「初めてのブログhttps://hajimete.org」のURLでエゴサすることがあるんですが、数時間前に話題に上げてもらえたので速攻で作った雑なUIと整合性が取れる雑なチェックボックス（複雑すぎない）をご紹介します！

初めての目次

①ちょっと雑なトグルボタン
②超雑なトグルボタン
③超超雑なトグルボタン
話題に上げてくれて嬉しい！

①ちょっと雑なトグルボタン

onoff

HTML

<label class="t">
 <input type="checkbox" name="" />
 <span>on</span><span>off</span>
</label>

CSS

.t input {display: none;}
.t span {
 display: inline-block;
 width: 46px;
 text-align: center;
 padding: 4px 0;
 color: #000;
 border: 1px solid #000;
 cursor: pointer;
}
.t span:hover {opacity: .3;}
.t span:nth-of-type(2) {
 background: #000;
 color: #fff;
}
.t.chkd span:nth-of-type(1) {
 background: #000;
 color: #fff;
}
.t.chkd span:nth-of-type(2) {
 background: #fff;
 color: #000;
}

jQuery

$(".t span").on("click", function() {
 // on/off切り替え
 $(".t").toggleClass("chkd");
 // onになったら
 if($(".t").hasClass("chkd")) {// チェックボックス チェック
  $(".t input").prop("checked", true);
 } else {// チェックボックス ノーチェック
  $(".t input").prop("checked", false);
 }
});

②超雑なトグルボタン

onoff

HTML

<label class="t">
 <input type="checkbox" name="" />
 <span>on</span><span>off</span>
</label>

CSS

.t input {display: none;}
.t span {
display: inline-block;
color: blue;
cursor: pointer;
}
.t span:nth-of-type(2) {
color: red;
margin-left: 12px;
}
.t.chkd span:nth-of-type(1) {color: red;}
.t.chkd span:nth-of-type(2) {color: blue;}

jQuery

$(".t span").on("click", function() {
 $(".t").toggleClass("chkd");
 if($(".t").hasClass("chkd")) { $(".t input").prop("checked", true); }
 else { $(".t input").prop("checked", false); }
});

③超超雑なトグルボタン

〇×

HTML

<label class="t">
 <input type="checkbox" name="" />
 <span>〇</span><span>×</span>
</label>

CSS

.t input {display: none;}
.t span {cursor: pointer;}
.t span:nth-of-type(2) {color: red;}
.t.chkd span:nth-of-type(1) {color: red;}
.t.chkd span:nth-of-type(2) {color: black;}

jQuery

$(".t span").on("click", function() {
 $(".t").toggleClass("chkd");
 if($(".t").hasClass("chkd")) { $(".t input").prop("checked", true); }
 else { $(".t input").prop("checked", false); }
});