HTML Checkbox grouping

Simple code snippet – adapted from http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group

<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script type=”text/javascript”>
$(document).ready(function () {
$(“input:checkbox”).click(function() {
     if ($(this).is(“:checked”)) {
          var group = “input:checkbox[name='” + $(this).attr(“name”) + “‘]”;
          $(group).prop(“checked”, false);
          $(this).prop(“checked”, true);
     } else {
          $(this).prop(“checked”, false);
     }
     });
});
</script>
</head>
<body>
<form>
     <input type=”checkbox” class=”radio” value=”Red” name=”group1” />
     <input type=”checkbox” class=”radio” value=”Blue” name=”group1″ />
     <input type=”checkbox” class=”radio” value=”Yellow” name=”group1″ />
     <p>&nbsp;</p>
     <input type=”checkbox” class=”radio” value=”Dog” name=”group2” />
     <input type=”checkbox” class=”radio” value=”Cat” name=”group2″ />
     <input type=”checkbox” class=”radio” value=”Bird” name=”group2″ />
</form>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s