Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by elk6
elk6
22,916 Points

HTML5 required checkbox in group?

I have a form with a group of checkboxes in it ( and some other options but they are irrelevant for this question ). The user sees 7 checkboxes in one form group and i want them to select at least one of them. Is this possible with the "required" attribute in any way? Just like with radiobuttons, i mean. You give one of them in a group the "required" att and you will to choose just one. Or will i have to turn to JQuery or similar?

Thanks in advance.

Elian

Here's my code to give you an idea:

<div class="form-group">
    <label class="control-label col-md-4" for="optiontext">Specify an option</label>
    <div class="col-md-6">
        <input type="checkbox" name="option[]" value="option1"/> Option 1<br>
        <input type="checkbox" name="option[]" value="option2" /> Option 2<br>
        <input type="checkbox" name="option[]" value="option3" /> Option 3<br>
        <input type="checkbox" name="option[]" value="option4" /> Option 4<br>
        <input type="checkbox" name="option[]" value="option5" /> Option 5<br>
        <input type="checkbox" name="option[]" value="option6" /> Optione 6<br>
        <input type="checkbox" name="option[]" value="option7" />  Option 7
    </div>
</div>
Matthias J.
Matthias J.
20,355 Points
Matthias J.
Matthias J.
20,355 Points

i am afraid, you have to use jquery for that ;(

elk6
elk6
22,916 Points

Thanks Matthias,

It was no problem using Jquery but i wondered if there was a simpeler version. Since HTML5 makes the rest so simple. :)

I'll post my code that got it working below.

1 Answer

elk6
elk6
22,916 Points

Since there is no clear way to do this, i used JQuery for it. Here's what i did, in case anyone wants to use it.

First, i changed all the checkboxes to required and added the "options" class to the form group div ( i wanted to select this specific group ).

<div class="form-group options">
    <label class="control-label col-md-4" for="optiontext">Specify an option</label>
    <div class="col-md-6">
        <input type="checkbox" name="option[]" value="option1" required/> Option 1<br>
        <input type="checkbox" name="option[]" value="option2" required/> Option 2<br>
        <input type="checkbox" name="option[]" value="option3" required/> Option 3<br>
        <input type="checkbox" name="option[]" value="option4" required/> Option 4<br>
        <input type="checkbox" name="option[]" value="option5" required/> Option 5<br>
        <input type="checkbox" name="option[]" value="option6" required/> Option 6<br>
        <input type="checkbox" name="option[]" value="option7" required/>  Option 7
    </div>
</div>

Then, i added this code ( not my own code, by the way ;) ) that checks if at least one of the checkboxes is checked and removes the required attribute from all other checkboxes if that is the case.

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});