Javascript - Display a different content if a checkbox is active

Question

I'm trying to set up something in JQuery but at the moment I'm not really sure I'm doing it right.

To keep it simple, I would like to display 4 checkboxes. These checkboxes serve as filters. For the example, let's say the first checkbox is spring, the second is summer, the third is autumn and the fourth is winter.

When I check the "summer" box I would like some text to be displayed. If I tick the autumn one, another text is displayed. Basically, I would like to display different texts depending on what is ticked.

<script type="text/javascript">
    function ShowHideDiv(winter) {
        var winter_list = document.getElementById("winter_list");
        winter_list.style.display = winter.checked ? "block" : "none";
    }
</script>
<script type="text/javascript">
    function ShowHideDiv(summer) {
        var summer_list = document.getElementById("summer_list");
        summer_list.style.display = summer.checked ? "block" : "none";
    }
</script>

<label for="checkWinter">
    <input type="checkbox" id="winter" onclick="ShowHideDiv(winter)" />
    Winter
</label>
<label for="checkSummer">
    <input type="checkbox" id="summer" onclick="ShowHideDiv(summer)" />
    Summer
</label>
<hr />


<!-- For Winter -->
<div id="winter_list" style="display: none">
<p>Text come here</p>
</div>


<!-- For Summer -->
<div id="summer_list" style="display: none">
<p>Text come here for summer</p>
</div>

If possible: Can we make it possible to tick more than one box?

I've been following tutorials on StackOverflow but so far without much success, as I haven't found anything in the genre of my same request.

Thanks

Welcome to SO. Please try to start working on your requirement one by one. If you get stuck at some point, please tyr tyo solve it yourself. If you are not able to achive it, please post a question with relavent code. — Nitheesh, Feb 11 '22 at 10:12
I also have try with this post [link]https://stackoverflow.com/questions/901712/how-do-i-check-whether-a-checkbox-is-checked-in-jquery My checkbox display, but when I click on the first or the second, the same text is displayed. And just added my code — Moerip, Feb 11 '22 at 10:15
@Moerip You uses standard javascript, but you tagged jquery. Which way do you prefer? — Reporter, Feb 11 '22 at 10:23
@Reporter If we can do that's in Javascript, I prefer in javascript — Moerip, Feb 11 '22 at 10:27

score 2 · Accepted Answer · answered Feb 11 '22 at 10:43

You have a mistake in thinking of your code.

The function ShowHideDiv()does exists two times and Javascript overload it. Because your passed an undefined object, the browser choose one of them.

My Suggestion:

First step: Replace the function calls in your input fields by <input type="checkbox" id="summer" onclick="ShowHideDiv(this)" />. The parameter this passes the clicked object to target function.

Second step: Merge all of your function "ShowHideDiv" to one:

function ShowHideDiv(checkbox) {
   switch (checkbox.id)
   {
      case "summer":
            var summer_list = document.getElementById("summer_list");
             summer_list.style.display = summer.checked ? "block" : "none";
         break;
      case "winter":
          var winter_list = document.getElementById("winter_list");
                winter_list.style.display = winter.checked ? "block" : "none";
          break;
      default:
        //What ever you want do to
        break;
   }
}

The argument checkbox.id returns the value from attribute id of passed checkbox.

Switch and case is a smaller form of if() else if() and else().

score 2 · Answer 2 · answered Feb 11 '22 at 10:50

First, give all your checkboxes an id. You can then add data-target to the display texts for easy selection. Try this

<label for="winter">
    <input type="checkbox" id="winter" onchange="ShowHideDiv(this)" />
    Winter
</label>
<label for="summer">
    <input type="checkbox" id="summer" onchange="ShowHideDiv(this)" />
    Summer
</label>
<hr />

<!-- Display text -->
<div>
    <p style="display: none" data-target="#winter">Text come here</p>
    <p style="display: none" data-target="#summer">Text come here for summer</p>
</div>

<script type="text/javascript">
    function ShowHideDiv(elem) {
        var target = document.querySelector('[data-target="#'+elem.id+'"]');
        target.style.display = elem.checked ? 'block' : 'none';
    }
</script>

Razvan Zamfir · Answer 3 · 2022-02-11T11:34:10.377

The simplest, cleanest solution I could think of is this:

const ShowHideDiv = function (check, season) {
  let el = document.getElementById(season);
  
  // hide element(s)
  el.classList.add('hidden');
  
  // Show element(s) if checked
  if(check.checked === true){
    el.classList.remove('hidden');
  }
}

.hidden {
  display: none;
}

<label for="checkWinter">
    <input id="checkWinter" type="checkbox" onchange="ShowHideDiv(this, 'winter')" />
    Winter
</label>
<label for="checkSummer">
    <input id="checkSummer" type="checkbox" onchange="ShowHideDiv(this, 'summer')" />
    Summer
</label>
<label for="checkSpring">
    <input id="checkSpring" type="checkbox" onchange="ShowHideDiv(this, 'spring')" />
    Spring
</label>
<hr />


<!-- For Winter -->
<div class="hidden" id="winter">
  <p>Text come here  for winter</p>
</div>


<!-- For Summer -->
<div class="hidden" id="summer">
  <p>Text come here for summer</p>
</div>


<!-- For Spring -->
<div class="hidden" id="spring">
  <p>Text come here for spring</p>
</div>

It works without changes for 2, 3 or 4 seasons.

Javascript - Display a different content if a checkbox is active

3 Answers3