Skip to content

Instantly share code, notes, and snippets.

@MyCueCards
Last active May 23, 2021 01:59
Show Gist options
  • Save MyCueCards/1891ad28c106791f6e97c01f18645355 to your computer and use it in GitHub Desktop.
Save MyCueCards/1891ad28c106791f6e97c01f18645355 to your computer and use it in GitHub Desktop.
toggles checkboxes on and off with jquery. If one check box changes (mainsub), then the other checkboxes (interest) change.
<!-- toggles checkboxes on and off with jquery. If one check box changes (mainsub), then the other checkboxes (interest) change.
<html>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<body>
<input type="checkbox" class="interest" />
<input type="checkbox" class="interest" />
<input type="checkbox" class="interest" />
<input type="checkbox" class="mainsub" />
<span id="message">this is a message!</span>
<script>
$('input.mainsub').on('change', function() {
$('#message').hide();
if ($('input.mainsub').is(':checked')) {
$('input.interest').not(this).prop('checked', true);
}
else {
$('input.interest').not(this).prop('checked', false);
}
});
$('input.interest').on('change', function() {
$('#message').hide();
if ($('input.mainsub').is(':checked')) {
$('input.mainsub').not(this).prop('checked', false);
}
else if ($('.interest:checked').length == $('.interest').length) {
$('input.mainsub').not(this).prop('checked', true);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment