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/