[jQuery]チェックボックスにチェックが付いたら画像リンクを表示する

お問合せフォームや申し込みフォームで「個人情報・・・・」に「同意しますか？」みたいなチェックボックスでチェックが付いたら「次へ」のリンクを表示する。

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

いろんなやり方があるけれど、参考サイトの書き方が一番分かりやすいかな。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

jQueryを読み込んで

$(function(){
  //ウインドウロード時
  $(window).load(function(){
    if($('#checkbox').attr("checked")){
      btn1();
    }
    else {
      btn2();
    };
  });
  //クリック時
  $('#checkbox').click(function(){
    if(this.checked){
      btn1();
    }
    else {
      btn2();
    };
  });
  //要素にaを追加
  function btn1() {
    $('#dbtn1').html('<a href="リンク先URL" target="_blank"><img src="ON画像のURL" alt="同意する" width="135" height="35" border="0" /></a>');
  };
  //要素からaを削除
  function btn2() {
    $('#dbtn1').html('<img src="OFF画像のURL" alt="同意する" width="135" height="35" border="0" />');
  };
});

HTMLはOFF画像を表示する

<table width="350" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td valign="top"><input type="checkbox" name="checkbox" id="checkbox" /></td>
<td valign="top">「個人情報の取り扱いに関する同意条項」に同意します。<br />
※ご同意いただけない場合はお申込みいただけません。</td>
</tr>
</table>

<p align="center"><font color="#FF0000">お申込み手続きは、上記「同意確認」をチェックの上、<br />
「同意する」のボタンをクリックして下さい。</font></p>
<table width="350" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><div id="dbtn1"><img src="OFF画像のURL" alt="同意する" width="135" height="35" border="0" /></div></td>
<td align="center"><a href="index.html"><img src="同意しない画像のURL" alt="同意しない" width="135" height="35" border="0" /></a></td>
</tr>
</table>

最初の表示はOFFの表示にする（チェック無し）

チェックが付いたらONの表示に変わる（jQueryで変わる）

簡易的なチェックだけど、結構、大事だったりする。