jQuery Sibilings Demo

An exclusive check box example using of the Siblings() method.

by mrrodd

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css."></script>
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>jQuery Sibilings Demo</title>
</head>
<body>
    <p>jQuery Exclusive Checkbox</p>
    <div id="gender">
        <input id="male" type="checkbox" value="M">
        <label for="male">Male</label>
        <br/>
        <input id="female" type="checkbox" value="F">
        <label for="female">Female</label>
        <br/>
        <input id="other" type="checkbox" value="O">
        <label for="other">Other</label>
        <br/>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial;
    /* Set base size to 10px */
    font-size: 0.625em;
}
p {
    margin: 0.5em;
}
div {
    margin: 0.5em;
}

JavaScript

$(document).ready(function() {
    // When a checkbox is checked, uncheck all the others
    $('input:checkbox').click(function() {
        if(this.checked) {
          $(this).siblings().removeAttr('checked');
        }
    });
});