How can I force the user to mark three checkboxes?

Question

I have a html form.

I want the user to be able to mark three checkboxes. If he marks more than three, I want to send an immediate warning message. How do I do this? (Never worked with JavaScript before).

Answer 1

EDIT: Okay, now you've changed the question to one which is effectively completely different.

You need to subscribe an eventhandler to the onClick event for each of the checkboxes. Check how many are already clicked and whether the user is trying to check an extra one or uncheck a currently-checked one. If the result would be an invalid state, you could raise an alert or make a hidden div visible to warn the user.

---

Original answer, back from when the question was forcing the user to mark one checkbox only.

Can't you use a radio button instead of a check box? That would be more appropriate in UI terms.

(If you're not familiar with radio buttons in HTML, there are lots of tutorials available.)

Another option would be a drop-down menu (using the select element).

Answer 2

use radio buttons instead of checkboxes?

Answer 3

Use a radio button instead - that is what they are for, to permit only one in a group to be checked

Answer 4

The default and best way for usability is to use radiobuttons instead.

When to Use Radio Buttons

Radio buttons are little circles that fill with a black dot when clicked. Radio buttons should only be used when there is a list of two or more options, and the selection of one option negates the other(s). Put simply, use radio buttons when you want users to select a single item from a list. Set one option as the default, and make sure that if another radio button is selected any previously selected button clears.

Because this is the standard use of radio buttons, users will expect this functionality. Additionally, Jakob Nielsen advises in a usability alert to use radio buttons instead of drop-down menus so that users can easily weigh all of the options without having to execute precise mouse movements.

When to Use Checkboxes

Checkboxes can be correctly used in two different ways:

1. With lists of items where visitors may select zero, one or more items
2. A single box with a standalone yes/no type question Checkboxes are a good way to ask users whether they’ve read an agreement before converting or survey readers on specific actions they’ve taken, brands they’ve purchased, etc.

While the differences may seem insignificant at first, the correct usage of radio buttons and check boxes creates a better user experience because the site behaves in a way they expect. And, you can cut down the amount of instructions given–creating a cleaner, quicker way to convert.

Taken from http://www.wbsonline.com/resources/usability-check-radio-buttons-vs-checkboxes/.

Other options are to use a dropdownlist or an itemlist with only one selection possible.

Answer 5

The short answer: Add "onchange" event listener to each checkbox. When they are checked, run a function that counts how many are checked and react appropriately.

Here's a quick sample in jQuery (I haven't tested this but it should work):

$('input[type="checkbox"]).change(function(evt) {
    if($('input[type="checkbox"]:checked').length > 3) {
        evt.preventDefault();
        alert('Only 3 items can be selected!');
    }
});

edit:

A quick jQuery tutorial: http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics

Answer 6

You could set onClick="someFunction" on your checkbox, and then use something like:

var count = 0;
function someFunction(sender) {
  if (sender.checked == 1) count++;
  else count--;
  if (count > 3)
  alert("Warning");
}

Answer 7

Use jQuery. Here's an example that checks all your individual checkbox groups:

$(document).ready(function(){
  $(":checkbox").change(function(){
    if ($("[name="+this.name+"]").filter(":checked").length>3) {
      alert("Warning! You've selected more than three options.");
    }
  });
});

Here's an example with your code.