StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I hope <a href="http://jsfiddle.net/mv2hb/" rel="nofollow">this</a> one will work </p> <p><em>HTML</em></p> <pre><code>A <input type="checkbox" class="alpha" value="A" /> | B <input type="checkbox" class="alpha" value="B" /> | C <input type="checkbox" class="alpha" value="C" /> <br /> 1 <input type="checkbox" class="num" value="1" /> | 2 <input type="checkbox" class="num" value="2" /> | 3 <input type="checkbox" class="num" value="3" /> </code></pre> <p><em>JavaScript</em></p> <pre><code>// include jQuery library var enforeMutualExcludedCheckBox = function(group){ return function() { var isChecked= $(this).prop("checked"); $(group).prop("checked", false); $(this).prop("checked", isChecked); } }; $(".alpha").click(enforeMutualExcludedCheckBox(".alpha")); $(".num").click(enforeMutualExcludedCheckBox(".num")); </code></pre> <p>well, radio button should be the one to be used in mutually excluded options, though I've encountered a scenario where the client preferred to have zero to one selected item, and the javaScript'ed checkbox works well.</p> <p><em>Update</em></p> <p>Looking at my answer, I realized it's redundant to refer to the css class twice. I updated my code to convert it into a jquery plugin, and created two solutions, depending on ones preference</p> <p><strong>Get all checkboxes whose check is mutually excluded</strong></p> <pre><code>$.fn.mutuallyExcludedCheckBoxes = function(){ var $checkboxes = this; // refers to selected checkboxes $checkboxes.click(function() { var $this = $(this), isChecked = $this.prop("checked"); $checkboxes.prop("checked", false); $this.prop("checked", isChecked); }); }; // more elegant, just invoke the plugin $("[name=alpha]").mutuallyExcludedCheckBoxes(); $("[name=num]").mutuallyExcludedCheckBoxes(); </code></pre> <p>HTML</p> <pre><code>A <input type="checkbox" name="alpha" value="A" /> | B <input type="checkbox" name="alpha" value="B" /> | C <input type="checkbox" name="alpha" value="C" /> <br /> 1 <input type="checkbox" name="num" value="1" /> | 2 <input type="checkbox" name="num" value="2" /> | 3 <input type="checkbox" name="num" value="3" /> </code></pre> <p><a href="http://jsfiddle.net/mv2hb/31/" rel="nofollow">sample code</a></p> <p><strong>Group all mutually excluded checkboxes in a containing element</strong></p> <p>JavaScript</p> <pre><code>$.fn.mutuallyExcludedCheckBoxes = function(){ var $checkboxes = this.find("input[type=checkbox]"); $checkboxes.click(function() { var $this = $(this), isChecked = $this.prop("checked"); $checkboxes.prop("checked", false); $this.prop("checked", isChecked); }); }; // select the containing element, then trigger the plugin // to set all checkboxes in the containing element mutually // excluded $(".alpha").mutuallyExcludedCheckBoxes(); $(".num").mutuallyExcludedCheckBoxes(); </code></pre> <p>HTML</p> <pre><code><div class="alpha"> A <input type="checkbox" value="A" /> | B <input type="checkbox" value="B" /> | C <input type="checkbox" value="C" /> </div> <div class="num"> 1 <input type="checkbox" value="1" /> | 2 <input type="checkbox" value="2" /> | 3 <input type="checkbox" value="3" /> </div> </code></pre> <p><a href="http://jsfiddle.net/mv2hb/29/" rel="nofollow">sample code</a></p> <p>Enjoy :-)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload