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

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

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

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

HTML

    	
  		
  			私は、上記の確認事項、および受講規約に同意します。
  	
    	
  		
  			一括払いで決済する  		
  	
  

サンプルとして、リンクは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(https://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 = $('利用規約にご同意頂けましたか？
※必ず利用規約を読み、同意する場合は上のチェックボックスをクリックして「チェック」してください');      	//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します。

	//チェックボックスクリック後の判断  	$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');					  			});  		}  	})