【jQuery】コピペ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したりしてます。
以上!

エンデ・バタローをフォローする
javascriptjQuery

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

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

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

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