jQueryを使ってチェックボックスが押されたらリンクをつける

Javascript

チェックボックスにチェックを入れるとaタグが出てリンクが押せるようになるというのをjQueryで作成したので、また作る時用に残しておきます。

JavaScriptがもっと効率良くかける気がしますが、ひとまず以下になりました。

HTMLソース

サンプルとして以下のHTMLを用意しました。

<input type="checkbox" id="ideaCheck" name="ideaCheck">チェック<br>
<p id="text01">リンク</p>

JavaScriptソース

$(function(){

	//ウインドウロード時
	$(window).load(function(){
		if($('#check').attr("checked")){
			hogehoge1();
		}
		else {
			hogehoge2();
		};
	});
			
	//クリック時
	$('#check').click(function(){
		if(this.checked){
			hogehoge1();
		}
		else {
			hogehoge2();
		};
	});

	
	//要素にaを追加
	function hogehoge1() {
		$('#text01').html('<a href="http://www.google.jp/" target="_blank">リンク</a>');
	};
	
	//要素からaを削除
	function hogehoge2() {
		$('#text01').html('リンク');
	};
	
});

チェックボックスのチェックした状態でページの更新をすると、チェックが残ったままになることもあったので、ウインドウロード時とチェックボックスクリック時と同じ処理を2回してます。

最初はwrapを使ってa要素を出し、チェックを外したらa要素を消していたのですが、IE8以下でうまく動かなかったので中身の要素をごっそり変えました。

実行結果

そして、出来たのがこちら


リンク

もっとうまくできそうだと思うのですが、同じような挙動のサンプルが見つからなかったのでここまで。

参考リンク