チェックボックスをオンにすると、最初の列にチェックボックスを表示し、2番目の列にイメージを表示することはできますか？

Question

最初の列で関連するチェックボックスが選択されている場合、2番目の列に画像を表示したいと思います。次のコードは私が開発したコードです。リンク上にカーソルを置くとイメージのツールチップが表示されます。第二カラム HTMLでホバー画像を表示することが可能に：

<TABLE CELLPADDING=3 CELLSPACING=10 BORDER=2 BGCOLOR="#FFFFCC"> 
    <TR> 
     <TD ALIGN=CENTER COLSPAN=5 BGCOLOR="#000099"><FONT SIZE="+1" 
     COLOR="#00FFFF">LINKS </FONT><I><FONT 
     COLOR="#00FFFF"><B> </B></I></FONT></TD> 
    </TR> 
    <TR> 

     <TD ROWSPAN=3><FONT SIZE="-2" FACE="ARIAL"><B><span> 
    <div> 

    <input id="radioDefault_3" name="Field3" type="hidden" value=""/> 
    <a href="#" class="tooltip" style=" color:black;line-height:25px; font-size:16px;" target="_self" > 
    <input id="Field3_0"  name="Field3"  type="radio"  class="field radio"   value="Link 1"  tabindex="1"      onchange="handleInput(this);"  onmouseup="handleInput(this);"      checked="checked"     /> 


     lINK 1 
     <span style=" background-color:white;margin-left:100px;"> 

     <img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#tbm=isch&q=rectangle&imgrc=A2WZlqcIvTWBzM:" style="float:center; background-color:#00529b;" /> 
     </span> 
</a> 

</div> 
    </span></A>, 
     <span> 
     <div> 
     <a href="#" class="tooltip" style="color:black;line-height:25px; font-size:16px;"> 
    <input id="Field3_1"  name="Field3"  type="radio"  class="field radio"   value="Link 2"  tabindex="2"      onchange="handleInput(this);"  onmouseup="handleInput(this);"         required  /> 
    LINK 2 
    <span style="margin-left:100px; margin-top:-50px;"> 

     <center><img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" style="float:center; " width=100% height=100% /></center> 

    </span> 
</a> </A>, 
     <BR><span> 
     <div> 
     <a href="#" class="tooltip" style="color:black;line-height:25px; font-size:16px;"> 
    <input id="Field3_2"  name="Field3"  type="radio"  class="field radio"   value="Link 3"  tabindex="3"      onchange="handleInput(this);"  onmouseup="handleInput(this);"         required  /> 
    LINK 3 
    <span style="margin-left:50px;margin-top:-80px;"> 

     <center><img class="cover" src="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" style="float:center;"width=100% height=100% /></center> 

    </span> 
</a> 

     </div> 
     </span></A></B></FONT></TD> 
     <TD ROWSPAN=3><IMG SRC="https://www.google.com/search?q=GOOGLE+IMAGES&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiD8ZWh5vDTAhUINiYKHWvKDV8Q_AUICigB&biw=1366&bih=662#imgrc=TsZQwEJjTUwQKM:" VALIGN=MIDDLE ></TD> 
     </TR> 
</TABLE> 
</CENTER> 

CSS：CSSで2つの列を作成するための1つのdiv内の

<style> 
a.tooltip {outline:none; } 
a.tooltip strong {line-height:30px;} 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { 
    z-index:10;display:none; padding:14px 20px; 
    margin-top:-30px; margin-left:1000px; 
    width:300px; line-height:16px; 
} 
a.tooltip:hover span{ 
    display:inline; position:absolute; color:#00529b; 
border:1px solid #DCA; } 



a.tooltip span 
{ 
    border-radius:4px; 
    box-shadow: 5px 5px 8px #CCC; 
} 
tr.noBorder td { 
    border: 0; 
} 
</style> 

Answer 1

ネストすることができます2のdivの。

Answer 2

小さな例

Sample Example

$(document).ready(function() { 

    $('#checkbox1').change(function() { 
     if($(this).prop('checked')) { 
     $('#img1').css('display', 'block'); 
    }else { 
     $('#img1').css('display', 'none'); 
    } 
}); 

を}）ご覧ください。