jQuery radio button methods
HTML
<input type="radio" name="targetaddress" value="own">Own</input>
<input type="radio" name="targetaddress" value="other" visibility: hidden>Other</input>
<input type="text" name="normaltext" value="Sample text"></input>
<div id="verbose">
</div>
CSS
input[type=text] {
display: none;
}
JavaScript
(function ($) {
function changeRadioButton(element, value) {
var name = $(element).attr("name");
$("[type=radio][name=" + name + "]:checked").removeAttr("checked");
$("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
$("[type=radio][name=" + name + "]:checked").change();
}
function getRadioButton(element) {
var name = $(element).attr("name");
return $("[type=radio][name=" + name + "]:checked").attr("value");
}
var originalVal = $.fn.val;
$.fn.val = function(value) {
//is it a radio button? treat it differently.
if($(this).is("[type=radio]")) {
if (typeof value != 'undefined') {
//setter
changeRadioButton(this, value);
return $(this);
} else {
//getter
return getRadioButton(this);
}
} else {
//it wasn't a radio button - let's call the default val function.
if (typeof value != 'undefined') {
return originalVal.call(this, value);
} else {
return originalVal.call(this);
}
}
};
})(jQuery);
//init
$(function() {
function log(data) {
$("#verbose").append("<div>" + data + "</div>");
}
function assertEqual(val1, val2) {
if(val1 != val2) {
alert("assertEqual failed: " + val1 + "/" + val2);
}
}
var radioValue = $("input[name=targetaddress]")
.change(function() {
log("Value change: " + $(this).val());
})
.val("other")
.val();
assertEqual(radioValue, "other");
var textValue = $("input[name=normaltext]")
.val("Oh my god")
.val();
assertEqual(textValue, "Oh my god");
});