無線電輸入替換使用jquery

Question

這似乎有點奇怪的問這個，因爲有幾個解決方案，但事實是，他們都看起來漂亮，我似乎沒有保存表單提交的輸入值正確的方法。

我正在尋找的東西，將取代所有無線電輸入與divs，當他們被懸停或點擊，獲得特殊類，隱藏的輸入類型爲每組無線電輸入同名，隱藏輸入將是用與用戶點擊的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);

並用$(inputButton)替換$("#"+inputName+"X"+inputValue)。

Answer 1

首先，你對問題的推論是相當準確的。 []字符在HTML標識中不合法，如果您的輸入名稱包含它們，則此代碼將會中斷。

ID和名稱標記必須以字母（[A-Za-z]）開頭，後面可以跟隨任意數量的字母，數字（[0-9]），連字符（「 - 」），下劃線（「_」），冒號（「：」）和句點（「。」）。

但是，這是事情。您甚至不需要爲元素分配任何ID，您可以繼續參考創建<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 demo放在一起。