Javascript復選框切換div隱藏顯示

Question

我希望有一個復選框（足球），當

未選中：

• 顯示一個DIV（FootballChoice），其中包含隨鼠標懸停而更改的復選框的標簽圖像

經過：

• 隱藏DIV（FootballChoice）
• 顯示一個隱藏的DIV（FootballChecked），其中包含替代標簽圖像
• 顯示另一個隱藏的DIV（FootballTeams）。

再次取消選中時，它需要返回到其原始狀態。

或者，如果有人知道如何將標簽圖像更改為與此處的mouseover元素中指定的圖像相同的標記，那這也將是有用的替代方法嗎？

先感謝您。

 <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type="checkbox"]').click(function(){ if($(this).attr("value")=="FootballTeams"){ $(".FootballTeams").toggle(); $(".FootballChecked").toggle(); $(".FootballChoice").toggle(); } }); }); </script> 

 .FootballChecked { display: none; } .FootballChoice { display: show; } .sport { display: none; border: 1px dashed #FF3333; margin: 10px; padding: 10px; background: #003366; } 

 <input id="Football" type="checkbox" value="FootballTeams"> <div class="FootballChoice"> <label for="Football" class="FootballChoice"> <img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png" onmouseover="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png';" onmouseout="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png';" alt="Football" title="Football"> </label> </div> <div class="FootballChecked"> <label for="Football"> <img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png" alt="Football" title="Football"> </label> </div> <div class="sport FootballTeams"> Football Teams here </div> 

Answer 1

您必須使用JavaScript嗎？ 您可以使用CSS 偽選擇:checked和一般兄弟姐妹選擇要顯示基於是否元素checkbox是:checked與否。

例如：

 #football {opacity:0.2;} .checked {display:none;} #football:checked ~ .unchecked {display:none;} #football:checked ~ .checked {display:block;} label { display:inline-block; border:1px solid blue; padding:20px; background:url(http://lorempixel.com/100/100/sports) } label:hover { border-color:red; background:url(http://lorempixel.com/100/100/cats) } div {border:1px dotted green;} 

 <input id="football" type="checkbox" value="1" /> <div class="unchecked"> Unchecked: displays one DIV <div id="FootballChoice"> (FootballChoice) containing a <label for="football">label image for the checkbox that changes with mouseover</label> </div> </div> <div class="checked"> Checked: hides the DIV (FootballChoice) shows a hidden DIV <div id="FootballChecked"> (FootballChecked) that contains an <label for="football">alternate label image</label> </div> shows another hidden DIV . <div id="FootballTeams"> (FootballTeams) </div> When unchecked again, this needs to return to it's original state. </div> 

http://jsfiddle.net/zpz3mvuv/