Limit the number of checkbox choices

Introduction:

Sometimes you might need to set a maximum number of available choices when using checkboxes.

For example if you had eight choices and you only wanted a max of three of them accepted!

For this purpose we will use some custom JavaScript to count how many checks are allowed.

Using the custom page node, the script looks like this:

<h1>Select Any Two Checkboxs</h1>
<div id="checkboxgroup">
  <input type="checkbox" value="CheckBox 1" name="cbx1"> Aubrey
	<input type="checkbox" value="CheckBox 2" name="cbx2"> Laura
	<input type="checkbox" value="CheckBox 3" name="cbx3"> Byron
  
  <!-- Note #1 Add <input type="checkbox"... lines as necessary -->
  
</div>

<script>
function onlyOneCheckBox() {
	var checkboxgroup = document.getElementById('checkboxgroup').getElementsByTagName("input");
	
    //Note #2 Change max limit here as necessary
    var limit = 2;
  
	for (var i = 0; i < checkboxgroup.length; i++) {
		checkboxgroup[i].onclick = function() {
			var checkedcount = 0;
				for (var i = 0; i < checkboxgroup.length; i++) {
				checkedcount += (checkboxgroup[i].checked) ? 1 : 0;
			}
			if (checkedcount > limit) {
				console.log("You can select maximum of " + limit + " checkbox.");
				alert("You can select maximum of " + limit + " checkbox.");
				this.checked = false;
			}
		}
	}
}
</script>

<script type="text/javascript">
	onlyOneCheckBox()
</script>

Simply copy/paste this code into a custom page node as is.

And modify it as necessary. There are 2 comments to guide you. Making the process completely simple.

Here’s a working demo: https://test2.leadshook.io/survey/ipos2BvlCurHDMqlx9aMR5vAGxZ2MBbcreCHZ6jv

Conclusion:

By using custom JavaScript, you can limit the number of checkboxes a user can select, providing additional control over user inputs in your decision trees.

Tagged: