1. TOPページに戻る
  2. Javascript
  3. jQueryを使ってチェックボックスが押されたらリンクをつける

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

チェックボックスにチェックを入れると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以下でうまく動かなかったので中身の要素をごっそり変えました。

実行結果

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


リンク

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

参考リンク