mercredi 5 avril 2017

Trying to use Jquery to make checkboxes hide/show different divs in overlapping categories

Trying to code for my student portfolio but I hit a major snag and nothing actually changes

    <script>
        $(function() {
  $('input[type="checkbox"]').on('change', function() {
    var AllChecked = $('.AllToggle').prop('checked');
    var UXChecked = $('.UXToggle').prop('checked');
    var DesignChecked = $('.DesignToggle').prop('checked');
    var ProgChecked = $('.ProgToggle').prop('checked');
    var ComChecked = $('.ComToggle').prop('checked');
    var VidChecked = $('.VidToggle').prop('checked');
    var BusTechChecked = $('.BusTechToggle').prop('checked');

    if (AllChecked) {
      $('.All').show();
    } else if (V1Checked) {
      $('.Ux').show();
    } else if (UXChecked && DesignChecked) {
      $('.UxD').show();
    } else if (UXChecked && ProgChecked) {
      $('.UxP').show();
    } else if (UXChecked && ComChecked) {
      $('.UxC').show();
    } else if (UXChecked && VidChecked) {
      $('.UxV').show();
    } else if (UXChecked && DesignChecked && ProgChecked) {
      $('.UxDP').show();
    } else if (UXChecked && ComChecked && VidChecked) {
      $('.UxCV').show();
    } else if (DesignChecked) {
      $('.D').show();
    } else if (DesignChecked && ProgChecked) {
      $('.DP').show();
    } else if (ProgChecked) {
      $('.P').show();
    } else if (ComChecked) {
      $('.C').show();
    } else if (ComChecked && VidChecked) {
      $('.CV').show();
    } else if (ComChecked && BusTechChecked) {
      $('.CBt').show();
    } else if (VidChecked) {
      $('.V').show();
    } else if (BusTechChecked) {
      $('.Bt').show();
  });
});
</script>

My body:

<body>
<div id='headering'>
<div id='page_title'>
</div>
</div>

<div id='content_border' class='All' class='.Ux' class='.UxD' class='.UxP' class='.UxDP' class='.D' class='.DP'>
<div id='content_inner'>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>

<div id='content_border' class='All' class='.Ux' class='.UxC' class='.UxV' class='.UxCV' class='.C' class='.CV' class='.V'>
<div id='content_inner'>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>

<div id='content_border' class='All' class='.C' class='.CBt' class='.Bt'>
<div id='content_inner'>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>



<div class='nav_border'>
<ul class='nav_inner'>
<li><input type="checkbox" class='AllToggle' checked>All</li>
<li><input type="checkbox" class='UXToggle'>User Experience</li>
<li><input type="checkbox" class='DesignToggle'>Design</li>
<li><input type="checkbox" class='ProgToggle'>Programming</li>
<li><input type="checkbox" class='ComToggle'>Communications</li>
<li><input type="checkbox" class='VidToggle'>Videography</li>
<li><input type="checkbox" class='BusTechToggle'>Business Technology</li>
</ul>
</div>
</div>
</body>
</html>

I don't believe I can use toggle since that would set off other divs to show up or disappear when they're not supposed to. If anyone has any idea of a way of making this work or an alternative method to hide and show divs of overlapping categories without making some appear when they're not supposed to I would really appreciate the help.




Aucun commentaire:

Enregistrer un commentaire