How can I use required attribute for a group of checkboxes?

Question

I have a group of checkboxes of which at least one has to be checked to submit the form. For this I named each checkbox identically and set the required attribute.

But this doesn't work:

<input name="mycheckgroup" type="checkbox" value="1" required />
<input name="mycheckgroup" type="checkbox" value="2" required /> 
<input name="mycheckgroup" type="checkbox" value="3" required />

I have to check all three boxes for submitting the form :-(

If this were radio buttons, it worked... But I want at least one or more boxes to be checked.

Can anyone help?

By default select ONE radio button..it will be easy for you. [check it here](http://jsfiddle.net/sm48cmze/) — SweetWisher ツ, Oct 14 '14 at 09:53

score 2 · Answer 1 · edited May 23 '17 at 12:15

Without introducing JavaScript the most logical answer to this would be to change your control to a select element (which is much more appropriate in your situation):

<select>
  <option value="1" selected>Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

If this isn't a good enough solution for you then you're going to have to handle the validation with JavaScript. I'm not going to provide a solution here as you don't have javascript tagged and may already know how to do this yourself anyway.

If you do want to use the JavaScript approach you should edit your question to ask for a possible JavaScript solution and include any libraries you use - although in the spirit of StackOverflow you should attempt to resolve this yourself.

No, sorry. I, think you misunderstood. I need possibility to check one or more checkboxes. - cypher75

In that case you can give your select element the multiple attribute, allowing you to select more than one option:

<select multiple required>
    <option disabled>Select Multiple</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

I've added an initial option element which is disabled in order for the select element's required attribute to take effect.

No, sorry. I, think you misunderstood. I need possibility to check one ore more checkboxes. — cypher75, Oct 14 '14 at 09:14
@cypher75 I've updated my answer. Also I've removed the "Thanks" from your question as this is discouraged on StackOverflow (nothing personal!). — James Donnelly, Oct 14 '14 at 09:18
From a UX perspective, checkboxes are MUCH easier to handle than a multi-select selection box. I hate having to use two hands to hold CTRL then left click to select multiple items. However, if you need to do a "one or more checkbox" required condition on checkboxes, you'll need to do more complex JavaScript event triggered validation. — Nelson, Jun 15 '16 at 03:03

cypher75 · Accepted Answer · 2014-10-14T09:58:15.287

As I didn't know, that I would need javascript for this solution I didn't tag it, sorry.

But I need it to be checkboxes (no select).

So, here is my working solution using jQuery:

<script>
$('.myCB').click(function(){
    if($('#cb1').is(':checked') || $('#cb2').is(':checked') || $('#cb3').is(':checked'))
        $(".myCB").attr("required", false);
    else
        $(".myCB").attr("required", true);
});
</script>

<input name="mycheckgroup" id="cb1" type="checkbox" value="1" class="myCB" required />
<input name="mycheckgroup" id="cb2" type="checkbox" value="2" class="myCB" required /> 
<input name="mycheckgroup" id="cb3" type="checkbox" value="3" class="myCB" required />

When checking any checkbox, the required attribute will be removed from all checkboxes in this group.

score 1 · Answer 3 · edited May 23 '17 at 12:08

1

Here is the nifty trick that I came up with:

Details: https://stackoverflow.com/a/37825072/1479143

Small snippet:

$cbx_group = $("input:checkbox[name='q-8']");
$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

edited May 23 '17 at 12:08

Community

1
1

answered Jun 15 '16 at 02:29

thegauraw

5,428
2
21
14

Divakar Gujjala · Answer 4 · 2014-10-16T09:24:09.590

0

This will work if you enclose the code in form tag and validation will be fired when you perform submit action. And use jQuery to add html5 required attribute dynamically.

HTML Code

<form>
    <input name="mycheckgroup" type="checkbox" value="1"  />
    <input name="mycheckgroup" type="checkbox" value="2"  /> 
    <input name="mycheckgroup" type="checkbox" value="3"  />
    <input type="submit" id="btnSubmit" value="submit" />
</form>

jQuery Code

$("#btnSubmit").click(function(e){
    if( $("input[name=mycheckgroup]:checked").length == 0){
        $("input[name=mycheckgroup]:first").attr("required", "required");
    }else{
        $("input[name=mycheckgroup]").removeAttr("required");               
        $("form").submit();
    }           
});

http://jsfiddle.net/2sxy6uqd/2/

edited Oct 16 '14 at 09:24

answered Oct 14 '14 at 11:29

Divakar Gujjala

803
8
24

Thanks for your answer. But this is not the solution. In your example you have to check all three boxes to fulfil the requirements. But I want it to require at least one checkbox to be checked ;-) – cypher75 Oct 16 '14 at 08:37
By default HTML5 core does not featured group checkboxes. Instead, you can use jquery to validate this. Reference http://jsfiddle.net/2sxy6uqd/1/ – Divakar Gujjala Oct 16 '14 at 09:15
This problem already has been solved using jQuery ;-) – cypher75 Oct 16 '14 at 09:39
Okay. But in the other example I found an issue that if you go with 100 check boxes then you need to declare all of them which is a tedious job and if you are using input type submit then it does n't works. More than that other jquery works only if you select / deselect the checkbox. – Divakar Gujjala Oct 16 '14 at 09:49

How can I use required attribute for a group of checkboxes?

4 Answers4