remplacement d'entrée radio en utilisant jquery

Question

Cela peut sembler un peu étrange de poser cette question car il existe plusieurs solutions, mais le fait est que tous d'entre eux sont jolis et rien de ce que j'ai l'air enregistrer la valeur d'entrée pour la soumission du formulaire La bonne façon. Je cherche quelque chose qui remplacera toutes les entrées radio avec divs qui obtiennent des classes spéciales quand ils sont en vol stationnaire ou cliqué, et un type d'entrée caché pour chaque groupe d'entrées radio avec le même nom, entrée cachée qui sera mis à jour avec la valeur correspondant au div sur lequel l'utilisateur clique. Longue phrase, je sais. Voici ce que j'ai trouvé:

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

Dites-moi comment résoudre ce problème. Je vous remercie.

Modifier J'ai trouvé la raison. Cela devrait normalement fonctionner mais certaines de mes entrées radio générées par un logiciel de commerce électronique comportaient des parenthèses (par exemple id [12]) et jQuery l'analysait. Le correctif ajoute

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

avant la liaison et le remplacement $("#"+inputName+"X"+inputValue) avec $(inputButton).

Answer 1

Tout d'abord, votre déduction du problème est assez précise. Les caractères [] ne sont pas légaux dans un identifiant HTML, et si votre nom d'entrée les a, ce code va se casser.

ID et jetons Le nom doit commencer par une lettre ([A-Za-z]) et peut être suivi par un certain nombre de lettres, chiffres ([0-9]), des traits d'union ("-"), souligne ("_"), deux-points (":") et points (".").

Mais, voici la chose. Vous n'avez même pas besoin d'attribuer un ID à l'élément, vous pouvez conserver des références à la création <div> et juste le référencer. Jetez un oeil à ce code refactorisé:

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

Je mets ensemble un jsfiddle demo.