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/