HTML radio and checkbox input combined?

Question

How do you combine a radio and checkbox input? With that I mean when you select the radio button it deselects the checkboxes and when you select a checkbox the radio input gets deselected.

Here's my example input form:

<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>

Which would look like this

Example render of code.

Now if I were to select option 4 I want option 2 and option 3 to deselect. How do I as best do this? Is there some easy trick or do I have to include some javascript magic?

You would need JavaScript. It's not a good idea for reasons of usability. Having things behave in a way that users do not expect violates the Principle of Least Astonishment: en.wikipedia.org/wiki/Principle_of_least_astonishment — Bob Brown
– Bob Brown, Commented Oct 5, 2014 at 20:09
@BobBrown But it would act as I expect 'cause in my mind radio buttons deselect when you select anything else from the same group. And that is what I want to acomplish here. — Applejag
– Applejag, Commented Oct 5, 2014 at 20:11
It may act as you expect, but it won't act as your readers expect. You do not have radio buttons. You have a combination of checkboxes and radio buttons. Users will not expect that operating a radio button will change any checkbox. Suggestion: Use all checkboxes and eliminate invalid combinations with JavaScript and an explanatory message. — Bob Brown
– Bob Brown, Commented Oct 5, 2014 at 20:16
@BobBrown So you're saying I should change system? And not use a custom system? I could do that but I thought it would be nice. — Applejag
– Applejag, Commented Oct 5, 2014 at 20:21

iraklisg · Accepted Answer · 2017-06-28 10:03:10Z

3

Check the following (JQuery is required). Please also read my comment on OP's accepted answer by @Maxim Orlovsky)

$('input[name="d[]"]').on('change', function(){
    if ($(this).attr('type') == 'radio' ) {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="checkbox"]').prop('checked', false);
        }
    }
    else {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="radio"]').prop('checked', false);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>

edited Jun 28, 2017 at 10:03

answered Aug 11, 2016 at 9:02

iraklisg

5,8096 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nik_m Over a year ago

IMO the MaximOrlovsky's answer is bugged (if you select option 2, then option 3 and then deselect option 2, the option 4 is automatically selected by itself). However ira's solution is the best answer to akaJag's question.

MaximOrlovsky · Accepted Answer · 2014-10-05 20:15:52Z

2

You need some JavaScript (jQuery):

$('input[name="d[]"]').on('change', function(){
    if ($(this).attr('type') == 'radio' ) {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="checkbox"]').prop('checked', false);
        }else {
            $('input[name="d[]"][type="checkbox"]').prop('checked', true);
        }
    }
    else {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="radio"]').prop('checked', false);
        }else {
            $('input[name="d[]"][type="radio"]').prop('checked', true);
        }
    }
});

Live demo -- http://jsfiddle.net/u2n8j5r2/1/

answered Oct 5, 2014 at 20:15

MaximOrlovsky

2652 silver badges8 bronze badges

5 Comments

Bob Brown Over a year ago

That's actually jQuery, so OP would need to include jQuery in his page. Also, with your fiddle, I can pick Option 4, then go back and select options 2 and 3.

Applejag Over a year ago

This doesn't deselect the radio button when I select a checkbox. Sorry for being unclear and thanks for quick respond.

MaximOrlovsky Over a year ago

@akaJag : I updated my code, now it works fine -- jsfiddle.net/u2n8j5r2/1.

Applejag Over a year ago

@MaximOrlovsky Works nicely! Thanks again for quick respond! I am not certain though if I should use this now concidering it may confuse some users.

iraklisg Over a year ago

@Maxim Orlovsky Please do check your code again... Looks like something you are missing. For example, if you select option 2, then option 3 and then deselect option 2, the option 4 is automatically selected by itself.

Bob Brown · Accepted Answer · 2014-10-05 20:48:42Z

1

Here is some code that uses all checkboxes, does not require jQuery, and should do what you want. (I've edited the code to change when the error message is removed.)

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Checkboxes</title>
<style type="text/css">
</style>
<script type="text/javascript">
//<![CDATA[
function chkBoxes() {
    var msg = document.getElementById("msg");
        cb1 = document.getElementById("cb1"),
        cb2 = document.getElementById("cb2"),
        cb3 = document.getElementById("cb3"),
        cb4 = document.getElementById("cb4");

    if (cb4.checked) {
        if (cb1.checked || cb2.checked || cb3.checked) {
            msg.innerHTML = "Option 4 not allowed with options 1-3";
            cb1.checked = false;
            cb2.checked = false;
            cb3.checked = false;
        } 
    } else {
        msg.innerHTML = "";
    }
}
//]]>
</script>
</head>
<body>
<input type="checkbox" name="d[]" id="cb1" value="1" onchange="chkBoxes();"> option 1<br/>
<input type="checkbox" name="d[]" id="cb2" value="2" onchange="chkBoxes();"> option 2<br/>
<input type="checkbox" name="d[]" id="cb3" value="3" onchange="chkBoxes();"> option 3<br/>
<input type="checkbox" name="d[]" id="cb4" value="4" onchange="chkBoxes();"> option 4<br/>
<p id="msg"></p>
</body>
</html>

edited Oct 5, 2014 at 20:48

answered Oct 5, 2014 at 20:33

Bob Brown

1,5222 gold badges13 silver badges27 bronze badges

1 Comment

Applejag Over a year ago

Ok yea I like your answer but I like Maxim's version more 'cause it works if they got the same name. And I think yours makes it so you can't select checkbox 1-3 when 4 is selected. I wanted the 4th option to be a radio just so you can't unselect it except by selecting checkbox 1-3

Collectives™ on Stack Overflow

HTML radio and checkbox input combined?

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related