Showing/hiding checkbox based on another checkbox selection

Question

Looking to have it so that when the first checkbox is selected (geographic_checkbox), a further 2 checkboxes are displayed (regions,cities &towns_checkbox and ringfencing_checkbox), but for some reason my code is not working.

$('#geographic_checkbox').on('click', function() {
  if (this.checked) {
    $('#geographic_suboptions').removeClass('hidden');
  } else {
    $('#geographic_suboptions').addClass('hidden');
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="targeting">
  <h1>Targeting</h1>
  <ul>
    <li>
      <input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox" onclick="GeographicFunction()">Geographic<br>
      <p id="geographic_text" style="display:none">+£0.08 CPC</p>
      <div id="geographic_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox" onclick="RegionsFunction()">Regions, Cities & Towns<br></li>
          <p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox" onclick="RingfencingFunction()">Ring-Fencing<br></li>
          <p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
        </ul>
      </div>
    </li>
  </ul>
</div>

Your current code seems to be working fine for me: jsfiddle.net/AndrewL64/76ujpd2v — AndrewL64
– AndrewL64, Commented Jan 29, 2020 at 16:35
just tried and it doesn't seem to work on safari or chrome for me — bboooooyintheuk
– bboooooyintheuk, Commented Jan 29, 2020 at 16:37
Check the console in dev tools for errors. Also ensure that the snippet above matches your code exactly. — Rory McCrossan
– Rory McCrossan, Commented Jan 29, 2020 at 16:40
@bboooooyintheuk Can you please upvote usefull answer ? Thanks ;) — johannchopin
– johannchopin, Commented Jan 29, 2020 at 18:14

johannchopin · Accepted Answer · 2020-01-29 17:36:33Z

Actually for such a feature you not really need javascript since css provide the :checked selector:

.hidden {
  display: none;
}

ul input:checked ~ #geographic_suboptions {
  display: inline;
}

<div class="targeting">
  <h1>Targeting</h1>
  <ul>
    <li>
      <input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox">Geographic<br>
      <p id="geographic_text" style="display:none">+£0.08 CPC</p>
      <div id="geographic_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox">Regions, Cities & Towns<br></li>
          <p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox">Ring-Fencing<br></li>
          <p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
        </ul>
      </div>
    </li>
  </ul>
</div>

Collectives™ on Stack Overflow

Showing/hiding checkbox based on another checkbox selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related