Skip to content

Instantly share code, notes, and snippets.

@brianpeiris

brianpeiris/radioCheckboxHybrid.html

Created November 1, 2009 18:15
Show Gist options
  • Save brianpeiris/223648 to your computer and use it in GitHub Desktop.
Save brianpeiris/223648 to your computer and use it in GitHub Desktop.
Download ZIP
Prototype hybrid checkbox/radio control
Raw
radioCheckboxHybrid.html
<!doctype html>
<html lang="en">
<head>
<title>radioCheckboxHybrid</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
label{display:block;}
</style>
</head>
<body>
<p>
This prototype code uses jQuery to combine the behaviour of radio and checkbox inputs.
It allows the user to select either one or more of the checkboxes OR exactly one radio button.
If all of the checkboxes are unchecked, the first radio button is checked.
</p>
<form action="">
<label><input type="checkbox" name="foo" value="a"/>a</label>
<label><input type="checkbox" name="foo" value="b"/>b</label>
<label><input type="checkbox" name="foo" value="c"/>c</label>
<label><input type="checkbox" name="foo" value="d"/>d</label>
<label><input type="radio" name="foo" value="e" checked="checked"/>e</label>
<label><input type="radio" name="foo" value="f"/>f</label>
<label><input type="radio" name="foo" value="g"/>g</label>
<button type="submit">submit</button>
</form>
<script type="text/javascript">
var radio = $('input[type=radio]');
var checkboxes = $('input[type=checkbox]');
radio.click(function () {
if (radio.serializeArray().length) {
checkboxes.removeAttr('checked');
}
});
checkboxes.click(function () {
if (checkboxes.serializeArray().length) {
radio.removeAttr('checked');
}
else {
radio.eq(0).attr('checked', 'checked');
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment