radio input replacement using jquery

Question

It may seem a bit odd to ask this since there are several solutions out there but the fact is that all of them look pretty and none of what i've seem save the input value for form submission the right way.

I'm looking for something that will replace all radio inputs with divs that get special classes when they are hovered or clicked, and an input type hidden for every group of radio inputs with the same name, hidden input that will be updated with the value corresponding to the div the user clicks on. Long sentence, i know. Here's what i've come up with:

$('input:radio').each(function(){
    if (this.style.display!='none') {
        var inputName = $(this).attr('name');
        var inputValue = $(this).attr('value');
        var isChecked = $(this).attr('checked');
        if (!$('input:hidden[name='+inputName+']').length)
        // if the hidden input wasn't already created
            $(this).replaceWith('<div class="inputRadioButton" id="'+inputName+'X'+inputValue+'"></div><input type="hidden" name="'+inputName+'" value="'+inputValue+'" />');
        else{
            $(this).replaceWith('<div class="inputRadioButton" id="'+inputName+'X'+inputValue+'"></div>');
            if (isChecked)
                $('input:hidden[name='+inputName+']').attr({'value':inputValue});
        }
        //this bind doesn't work
        $("#"+inputName+"X"+inputValue).click(function(){
            if($('input:hidden[name='+inputName+']').val()!=inputValue){
                $('input:hidden[name='+inputName+']').attr({'value':inputValue});
                $('div[id*='+inputName+'].inputRadioButton').removeClass('inputRadioButtonSelected');
            }
            if (!$("#"+inputName+"X"+inputValue).hasClass('inputRadioButtonSelected'))
                $("#"+inputName+"X"+inputValue).addClass('inputRadioButtonSelected');
        });
    }
});

Please tell me how to fix it. Thank you.

Edit I've found the reason. It should normally work but some of my radio inputs generated by an e-commerce software had brackets in them (e.g. id[12] ) and jQuery was parsing that. The fix is adding

var inputButton = document.getElementById(inputName+"X"+inputValue);

before the bind and replacing $("#"+inputName+"X"+inputValue) with $(inputButton).

Answer 1

First of all, your deduction of the problem is pretty accurate. The [] characters aren't legal in an HTML id, and if your input name has them, this code is going to break.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

But, here's the thing. You don't even need to assign any ID to the element, you can keep references to the create <div> and just reference it. Take a look at this refactored code:

$('input:radio').each(function(){
  var $radio = $(this), radioName = $radio.attr('name');
  // check if the radio is shown:
  if ($radio.is(':hidden')) return; 

  // create a div
  var $div = $("<div class='inputRadioButton' />");

  // store the radio name on the div:
  $div.data('radioName', radioName);

  // look for the hidden already being present:
  var $hidden = $('input:hidden').filter(function() { 
    return this.name == radioName; 
  });

  if (!$hidden.length) {
    // didn't find the hidden, lets create one and append it to this div:
    $hidden = $("<input type='hidden' name='"+radioName+"' />").val($radio.val());
    $div.append($hidden); 
  }

  // if the radio is checked, set the hidden value:
  if ($radio.attr('checked')) {
    $hidden.val($radio.val());
    $div.addClass('inputRadioButtonSelected');
  }

  $div.click(function(){
    $hidden.val($radio.val());

    // find any selected radio divs with the same radioName as us
    // and remove the selected class
    $(".inputRadioButtonSelected").filter(function() {
      return ($(this).data('radioName') == radioName);
    }).removeClass('inputRadioButtonSelected');

    // add the class to our div:
    $(this).addClass('inputRadioButtonSelected');
  });

  $radio.replaceWith($div);
});

I put together a jsfiddle demo.