$(function () { $('#yes').click(function (event) { if (event.target.checked) { $('#no').find('input').removeAttr('checked'); } }); $('#no').click(function (event) { if (event.target.checked) { $('#yes').find('input').removeAttr('checked'); } }); });
<fieldset> <legend>Yes</legend> <div id="yes"> <input type="checkbox" id="a" /> <label for="a">Yes, A</label> <br/> <input type="checkbox" id="b" /> <label for="b">Yes, B</label> <br/> </div> </fieldset> <fieldset> <legend>No</legend> <div id="no"> <input type="checkbox" id="c" /> <label for="c">No, C</label> <br/> <input type="checkbox" id="d" /> <label for="d">No, D</label> <br/> </div> </fieldset> <!-- Post Info --> <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> Blogged About: <a href='http://codingeverything.blogspot.com/2013/02/mutually-exclusive-checkboxes-with.html'>Mutually Exclusive Checkboxes with JQuery</a><br/> Find documentation: <a href='http://api.jquery.com/removeAttr/'>jQuery .removeAttr()</a><br/> Find documentation: <a href='http://api.jquery.com/event.target/'>jQuery event.target</a> <div>