Javascript - Display a different content if a checkbox is active-CodePudding

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

CodePudding user response：

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().

CodePudding user response：

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>