コピペOK! on/offスイッチ|雑なUIと整合性が取れるチェックボックストグルボタン3つ!

この記事は約4分で読めます。
スポンサーリンク

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

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

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

②超雑なトグルボタン

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

話題に上げてくれて嬉しい!

twitterでもなんでも話題に上げてもらえるのは嬉しい。
ありがとうございます!!
一応コードの説明をしますね!
CSSで「input」を消して、チェック機能だけ持たせます。
それで、ボタンが押されたらjQueryで消えた「input」のチェック機能をonしたり、offしたりしてます。
以上!

SNSフォローボタン
エンデ・バタローをフォローする
サイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました