チェックボックスにチェックを入れると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以下でうまく動かなかったので中身の要素をごっそり変えました。
実行結果
そして、出来たのがこちら
リンク
もっとうまくできそうだと思うのですが、同じような挙動のサンプルが見つからなかったのでここまで。
コメント