Javascript 复选框切换 div 隐藏显示

Question

我希望有一个复选框（足球），当

未选中：

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

已检查：

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

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

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

提前致谢。

<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 and the 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/

Javascript 复选框切换 div 隐藏显示

Javascript checkbox toggle div hide show

html

javascript

css

checkbox