CODEWITHSUNDEEP
javascripthtmlcsscheckbox
Daniel Moore
Daniel Moore

Reputation: 5

Javascript checkbox toggle div hide show

I am looking to have a checkbox (Football) that when

Unchecked:

Checked:

When unchecked again, this needs to return to it's original state.

Alternatively if anyone knows how to change the label image when checked to the same as the one specified in the mouseover element here, that would also be a usefull altetrnative?

Thank you in advance.

<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>

Upvotes: 0

Views: 1811

Answers (1)

Moob
Moob

Reputation: 16184

Do you have to use JavaScript? You could use the CSS Pseudo-selector :checked and the General Siblings Selector to display elements based on whether the checkbox is :checked or not.

E.G:

#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/

Upvotes: 1

Related Questions