замена радиовхода с помощью jquery

Question

Может показаться немного странным задавать этот вопрос, поскольку существует несколько решений, но факт в том, что все они выглядят симпатично, и ни одно из того, что мне показалось, не сохраняет правильное значение для ввода формы.

Я ищу что-то, что заменит все радиовходы на div, которые получают специальные классы при наведении или щелчке, а также тип входа, скрытый для каждой группы радиовходов с тем же именем, скрытый вход, который будет обновляться со значением, соответствующим div, на который нажимает пользователь. Длинное предложение, я знаю. Вот что я придумала:

$('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');
        });
    }
});

Подскажите пожалуйста, как это исправить. Спасибо.

Редактировать Я нашел причину. Обычно он должен работать, но некоторые из моих радиовходов, сгенерированных программным обеспечением для электронной коммерции, содержали скобки (например, id [12]), и jQuery это анализировал. Исправление добавляет

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

перед привязкой и заменой $("#"+inputName+"X"+inputValue) на $(inputButton).

Answer 1

Прежде всего, ваш вывод о проблеме довольно точен. Символы [] недопустимы в HTML-идентификаторе, и если они есть у вашего входного имени, этот код сломается.

Жетоны ID и ИМЯ должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркивания (" _ "), двоеточия (": ") и точки (". ").

Но вот в чем дело. Вам даже не нужно присваивать элементу какой-либо идентификатор, вы можете сохранить ссылки на create <div> и просто ссылаться на него. Взгляните на этот переработанный код:

$('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);
});

Я собрал демо jsfiddle .