Javascript 复选框切换 div 隐藏显示

Question

我希望有一个复选框(足球)，当

未选中:

• 显示一个 DIV (FootballChoice)，其中包含随鼠标悬停而更改的复选框的标签图像

检查:

• 隐藏 DIV (FootballChoice)
• 显示一个包含备用标签图像的隐藏 DIV (FootballChecked)
• 显示另一个隐藏的 DIV (FootballTeams)。

当再次取消选中时，这需要返回到它的原始状态。

或者，如果有人知道如何在选中时将标签图像更改为与此处的鼠标悬停元素中指定的图像相同，那也是一个有用的替代方法吗？

提前谢谢你。

<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 Pseudo-selector :checked和 General Siblings Selector根据 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/