With this script, I cant get it to work with radio buttons when their names are used as arrays (ie. group[1], group[2], etc). Each radio button in each group gets treated as a stand-alone radio button (on the UI side only) - as if they were checkboxes.
In other words, each RB in each group can be checked/unchecked independent of the other RBs in the same name group. If I use non-array names for the radio button groups (ie group1, group2, etc) it works fine. But, I need the array names because the number of groups changes and I need to loop thru however many there are. Every attempt I've made to get it to work with array names has broken it. <sigh> Any insight, code change, fix, etc would be greatly appreciated. The script is called via: $(’input[type=checkbox],input[type=radio]‘).prettyCheckboxes(); Thanks for any help! <code> /* ------------------------------------------------------------------------ prettyCheckboxes Developped By: Stephane Caron (http://www.no-margin-for-errors.com) Inspired By: All the non user friendly custom checkboxes solutions Version: 1.1 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. ------------------------------------------------------------------------- */ jQuery.fn.prettyCheckboxes = function(settings) { settings = jQuery.extend({ checkboxWidth: 20, checkboxHeight: 20, className : 'prettyCheckbox', display: 'inline' }, settings); $(this).each(function(){ // Find the label $label = $('label[for='+$(this).attr('id')+']'); // Add the checkbox holder to the label $label.prepend(""); // If the checkbox is checked, display it as checked if($(this).is(':checked')) { $label.addClass('checked'); }; // Assign the class on the label $label.addClass(settings.className).addClass($(this).attr('type')).addClass(settings.display); // Assign the dimensions to the checkbox display $label.find('span.holderWrap').width(settings.checkboxWidth).height(settings.checkboxHeight); $label.find('span.holder').width(settings.checkboxWidth); // Hide the checkbox $(this).addClass('hiddenCheckbox'); // Associate the click event $label.bind('click',function(){ $('input#' + $(this).attr('for')).triggerHandler('click'); if($('input#' + $(this).attr('for')).is(':checkbox')){ $(this).toggleClass('checked'); $('input#' + $(this).attr('for')).checked = true; }else{ $toCheck = $('input#' + $(this).attr('for')); // Uncheck all radio $('input[name='+$toCheck.attr('name')+']').each(function(){ $('label[for=' + $(this).attr('id')+']').removeClass('checked'); }); $(this).addClass('checked'); $toCheck.checked = true; }; }); $('input#' + $label.attr('for')).bind('keypress',function(e){ if(e.keyCode == 32){ if($.browser.msie){ $('label[for='+$(this).attr('id')+']').toggleClass("checked"); }else{ $(this).trigger('click'); } return false; }; }); }); }; checkAllPrettyCheckboxes = function(caller, container){ if($(caller).is(':checked')){ // Find the label corresponding to each checkbox and click it $(container).find('input[type=checkbox]:not(:checked)').each(function(){ $('label[for='+$(this).attr('id')+']').trigger('click'); if($.browser.msie){ $(this).attr('checked','checked'); }else{ $(this).trigger('click'); }; }); }else{ $(container).find('input[type=checkbox]:checked').each(function(){ $('label[for='+$(this).attr('id')+']').trigger('click'); if($.browser.msie){ $(this).attr('checked',''); }else{ $(this).trigger('click'); }; }); }; }; </code> -- View this message in context: http://www.nabble.com/PrettyCheckboxes-not-working-with-radio-array-names-tp20412719s27240p20412719.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.