Skip to content

Instantly share code, notes, and snippets.

@sergey-nagaytsev

sergey-nagaytsev/jquery.radioUncheckable.example.html

Created August 25, 2012 10:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sergey-nagaytsev/3463542 to your computer and use it in GitHub Desktop.
Save sergey-nagaytsev/3463542 to your computer and use it in GitHub Desktop.
Download ZIP
RadioButtons uncheckable: jQuery plugin
Raw
jquery.radioUncheckable.example.html
<html>
<head>
<title>Radio-button uncheckable: jQuery plugin w/ sample and doc.</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.radioUncheckable.js"></script>
<style>
ul > li > ul { padding: 0; margin: 0; }
ul > li > ul > li { list-style: none; }
</style>
</head>
<body>
<form>
<ul>
<li>
<b>Fruits</b>
<ul class="jq-radio-uncheckable">
<li><input type="radio" name="fruit">Apple</input></li>
<li><input type="radio" name="fruit">Orange</input></li>
<li><input type="radio" name="fruit">Peach</input></li>
</ul>
</li>
<li>
<b>Vegetables</b>
<ul class="jq-radio-uncheckable">
<li><input type="radio" name="vegetable">Cabbage</input></li>
<li><input type="radio" name="vegetable">Carrot</input></li>
<li><input type="radio" name="vegetable">Potato</input></li>
</ul>
</li>
<li>
<b>Electronic parts</b> (plain, NOT uncheckable)
<ul>
<li><input type="radio" name="electro">Capacitor</input></li>
<li><input type="radio" name="electro">Resistor</input></li>
<li><input type="radio" name="electro">Transistor, bipolar</input></li>
</ul>
</li>
</ul>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('.jq-radio-uncheckable input:radio').radioUncheckable();
});
</script>
</body>
</html>
Raw
jquery.radioUncheckable.js
/*
* Copyright 2012 Sergey Nagaytsev
* http://jquery.org/license ( MIT/GPL )
*/
(function( $ ) {
$.fn.radioUncheckable = function() {
var $arUncheckable = this;
function checkToData() {
$arUncheckable.each(function(){
$this = $(this);
$this.attr('data-checked',$this.is(':checked'));
});
}
checkToData();
$arUncheckable.live('click',function(){
if ( $(this).attr('data-checked') == '1' ) {
// Clicking checked - uncheck it
$(this).prop('checked',false);
checkToData();
} else {
checkToData();
$(this).attr('data-checked',1);
}
});
return this; // Chainability
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment