Html select only one checkbox in a group

html

checkbox

jquery

server-side-validation

byAnton Shumikhin·Aug 23, 2024

Use radio buttons styled as checkboxes to limit selection to a single option. A sprinkle of CSS can transform the appearance of radio buttons while retaining their unique-choice integrity.

Quick CSS recipe for radio-buttons-in-checkbox-clothing:

<input type="radio" name="uniqueGroup" id="opt1" class="fake-checkbox"/>
<label for="opt1">Choice 1</label>

<input type="radio" name="uniqueGroup" id="opt2" class="fake-checkbox"/>
<label for="opt2">Choice 2</label>

.fake-checkbox {
  display: none; /* CI: Cloaking Invisibility ;) */
}
.fake-checkbox + label:before {
  content: '□ '; /* our empty box */
}
.fake-checkbox:checked + label:before {
  content: '■ '; /* checked box, because you checked it right? */
}
.label {
  cursor: pointer;
}

This setup guarantees a solo selection within a group, featuring the aesthetics of checkboxes.

The jQuery way: checkboxes in group mode

Even though radio buttons keep to single-choice propriety, custom checkboxes, with some jQuery scripting, can offer similar functionality.

$('input[type="checkbox"]').click(function(){
    var checkboxGroup = 'input[name="' + $(this).attr('name') + '"]';
    // checkboxGroup? Ain't that a cool band name?
    $(checkboxGroup).not(this).prop('checked', false);
    // Invoking Queen's "There can be only one" rule - Highlander fans, you know!
});

This handy snippet ensures only one checkbox in a group is lit up, avoiding the chaos of multiple checkboxes running amok in the same group.

Second thoughts: jQuery checkbox unchecking

Change of heart happens. Here, users can unselect an option entirely. A small jQuery tweak can make this happen:

$('input[type="checkbox"]').change(function(){
    if(this.checked) {
        $(this).siblings('input[type="checkbox"]').prop('checked', false);
        // "Hey siblings, off you go! It's my turn now."
    }
});

This feature shows flexibility by offering users the illicit thrill of not selecting any checkbox.

Thinking about non-jQuery moments

In life, JavaScript can sometimes be absent. In such cases, standard radio buttons or an alternative input method is the fall-back option. It's crucial to ensure forms remain functional and accessible even when JavaScript is turned off. Always plan for the JavaScript Judgment Day!

Scrutiny at server-side with PHP

Since we're fiddling with forms, server-side validation for the checkbox group is necessary. Here's a PHP snippet that's sharper than Occam's Razor:

if(isset($_POST['uniqueGroup'])) {
    $selectedOption = $_POST['uniqueGroup'];
    // Got the option. Now what's on the menu?
}

This ensures consistent behaviour between the client-side and the server-side by allowing only one checkbox to be processed on the server.

A peek into the practical realm

For a more hands-on feel, offer direct examples or playpens like CodePen or JSFiddle for developers to interact with. It's like a sandbox, but without the messy sand and with all the fun.

explain-codes / Html / Html select only one checkbox in a group

Linked

How to select a radio button by default?



How to implement "select all" check box in HTML?



How to uncheck a radio button?



Onchange event handler for radio button (INPUT type="radio") doesn't work as one value



Post unchecked HTML checkboxes

