【jQuery】チェックボックスで要素をフェードイン/フェードアウト

2014.8.5 jQuery

コンバージョン前に!jQueryを使ってチェックボックスとボタンを連動して入れ替えてみた

需要があるかわかりませんが、jQueryで、「規約をお読みください」の下のボタンのリンクを無効化してみました。

規約を読んでチェックボックスにチェックを入れるとボタンがフェードインしてくる、謎のUIです。

 

コンバージョン前に!jQueryを使ってチェックボックスとボタンを連動して入れ替えてみた

HTML

<main class="main">

	<div class="enter">
		<p class="lg">
			<input type="checkbox" id="check"><label for="check">私は、上記の確認事項、および受講規約に同意します。</label></p>
	</div>

	<ul class="buttons">
		<li class="ikkatsu-enter">
			<a href="http://google.com" target="_blank"><button><span>一括払いで決済する</span></button></a>
		</li>
	</ul>
</main>

サンプルとして、リンクはGoogleにしておきます。
実際に使う場合はコンバージョンとするURLなど状況に合わせて記述してください。

CSS

li{list-style: none;}
.main {
	width: 800px;
	margin: 0 auto;
  text-align: center;
}
.buttons .ikkatsu-enter {
  margin-bottom: 30px;
}

.buttons button {
  width: 720px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 4px;
  border: none;
  background-color: #ff6061;
  -webkit-box-shadow: 0 4px 0 #803031;
  box-shadow: 0 4px 0 #803031;
  font-weight: bold;
  color: #fff;
  position: relative;
  cursor: pointer;
  background-image: url(http://ns6.s3.amazonaws.com/ltr/button-bg_slash.png);
  font-size: 1.4em;
}
.buttons button:hover {
  top: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #ff6061;
}

おもにボタンのスタイルですね。

では、jQueryです。

jQuery

$(function(){

	var $chk = $("#check");//チェックボックス文言

	$chk.attr('checked' , false);//チェックを外す

	$enterButton = $('.ikkatsu-enter a'); //コンバージョンボタンを保存

	$area = $enterButton.parent(); //ボタン挿入用変数

	//リンクさせないボタン
	$noButton = $('<button>利用規約にご同意頂けましたか?<br><small>※必ず利用規約を読み、同意する場合は上のチェックボックスをクリックして「チェック」してください</small></button>');


	//HTML読み込み時の判断	(チェックしていない状態)
	$area.prepend($noButton);
	$enterButton.remove();

	$noButton.click(function(event){//利用規約同意前にボタンをクリックしたら
		window.alert('【' + $('div.enter label').text() + '】をチェックして下さい');
	})

	//チェックボックスクリック後の判断
	$chk.on('click' , function(){

		if(!$chk.attr('checked')){//チェックとれた場合
			$enterButton.fadeOut('fast' , function(){
				$noButton.fadeIn('fast')
			});
		}else{//チェックついた場合(エンターのボタン登場)	
			$area.prepend($enterButton);				
			$noButton.fadeOut('fast', function() {
				$enterButton.fadeIn('fast');					
			});
		}
	})

});

3行目でチェックボックスを変数にぶち込んでいます。
5行目で.attr(‘checked’ , false)として、チェックボックスをリセットしています。
チェックを付けた状態で離脱すると、キャッシュがあるうちはチェックボックスにチェックがついたままなので…

ちなみにチェックボックスでチェックがあるかどうかの判定はjQueryセレクタの「:check()」もしくは今回採用している「.attr(‘checked’)」で確認できます。
※後から知りましたが、prop()でも出来るようです…
jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

7行目。HTML上に記述しているボタンをjQueryドキュメントとして変数に保存しておきます。
こうすることで、後でappendとかprependで再生できます。

さらにそれを使い、.parent()メソッドで親要素を取得し、これまた変数に入れておきます。
今回これがボタン挿入箇所の目印となります。
jQuery リファレンス:parent

12行目の$noButtonという変数に、ボタンをつくるHTMLをまるごと入れています。
これは後に「チェックボックスにチェックがない状態」で表示するボタンの役目を果たします。

そして、

	//HTML読み込み時の判断	(チェックしていない状態)
	$area.prepend($noButton);
	$enterButton.remove();

	$noButton.click(function(){//利用規約同意前にボタンをクリックしたら

		window.alert('【' + $('div.enter label').text() + '】をチェックして下さい');
	})

この部分で、早速ですが$areaに$noButtonをprependします。<li>の直下に入るわけです。

その直後に既存の「コンバージョンURLのリンクが有るボタン」をremoveで消去します。なぜ消去するかというと、チェックマークをつけていない状態だからです。

チェックマークをつけていない状態でボタンをクリックしても反応がない状態なのですが、これだけだとユーザーもどうしていいかわからないのでアラートでも出してやります。

それがwindow.alert~です。ここはlabel要素の文言を取得してきてアラートに表示しています。
なので上のHTMLになぞらえると
「※必ず利用規約を読み、同意する場合は上のチェックボックスをクリックして「チェック」してください」をチェックしてください
とアラートが出ます。今気づきましたが文章の意味がわからないですね。

24行目から、チェックボックスにチェックを入れてボタンが切り替わる処理です。

	//チェックボックスクリック後の判断
	$chk.on('click' , function(){

		if(!$chk.attr('checked')){//チェックとれた場合
			$enterButton.fadeOut('fast' , function(){
				$noButton.fadeIn('fast')
			});
		}else{//チェックついた場合(エンターのボタン登場)	
			$area.prepend($enterButton);				
			$noButton.fadeOut('fast', function() {
				$enterButton.fadeIn('fast');					
			});
		}
	})

if()~は、チェックマークが外された場合の処理です。
$enterButtonがfadeOutしたあとに、リンクのない$noButtonがfadeInします。

else~はそれと反対で、$areaにコンバージョンURLありのボタンをprependし(li直下に入るということ)、リンクのない$noButtonがfadeOutしたあとに、prependしたコンバージョンURLにリンクしたボタンが入れ替わりでfadeInします。

あれやこれやとワケが解りませんが、デモを貼っておきます。

チェックボックスにチェックをいれるとボタンが入れ替わって次のリンク先が現れるサンプル

今回のポイントなのですが、HTML上では最初、コンバージョンURLつきのボタンを記述しています。
しかし、画面をロードした瞬間の最初の状態ではjQueryでコンバージョンURLが無いボタンを表示しています。

最初からコンバージョンURLのないやつ書いとけばよくね?」となりますが、そうしてしまうとjQueryが読まれない状況下だとコンバージョン不可能となってしまいます。

なので多少の違和感があってもあくまで「体(てい)」としてワンクッション挟む程度のことだという認識で居てください。

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。