在複選框更改上切換相應的文本輸入

我有一組複選框，當它們的狀態爲:checked時需要顯示輸入。在複選框更改上切換相應的文本輸入

顯示覆選框的ID與其對應的文本輸入明顯不同，因此我試圖使用.replace來編輯我設置的變量以針對其相應的輸入。

複選框的父標識符的結構爲icon-metro-NAME，文本輸入爲「input-NAME」。

這是我的部分代碼，然後整個代碼後：

jQuery('input[type="checkbox"]').each(function() { 

    var checkbox = jQuery(this); 
    var checkboxParentID = jQuery(this).parent().attr('id'); 
    var inputName = checkboxParentClass.replace(icon-metro, 'input');

試圖設置input[type="checkbox"]爲this，然後找到它的父元素ID並將其設置爲checkboxParentID。然後我帶checkboxParentID並用input替換icon-metro以便定位相應的文本輸入字段。

checkbox.change(function() { 
     if (jQuery(this).is(":checked")) { 
      jQuery(this).parent('.metro-icon').addClass('active'); 
      jQuery(inputName).toggle('slow'); 
     } else { 
      jQuery(this).parent('.metro-icon').removeClass('active'); 
      jQuery(inputName).toggle('slow'); 
     } 
    }); 
});

然後我發現複選框的:checked狀態，如果它被選中，我添加一個active類到它的父元素.metro-icon。之後，我發現:checked元素對應的文本輸入inputName從我的變量，並切換它的可見性。否則，如果未選中，我將從其父項中刪除active類，並切換/隱藏相應的文本輸入。

全碼：

jQuery('input[type="checkbox"]').each(function() { 

    var checkbox = jQuery(this); 
    var checkboxParentID = jQuery(this).parent().attr('id'); 
    var inputName = checkboxParentClass.replace(icon-metro, 'input'); 

    checkbox.change(function() { 
     if (jQuery(this).is(":checked")) { 
      jQuery(this).parent('.metro-icon').addClass('active'); 
      jQuery(inputName).toggle('slow'); 
     } else { 
      jQuery(this).parent('.metro-icon').removeClass('active'); 
      jQuery(inputName).toggle('slow'); 
     } 
    }); 
});

我意識到這可能是一個爛攤子。我正在挑戰自己使用jQuery更高級。

來源

2013-05-25 Aj Troxell

我已經成功地得到它幾乎用這個工作是：http：/ /jsfiddle.net/eFtWh/但我得到「對象＃輸入 - 亞馬遜沒有方法」切換'「錯誤。 –

你是soooooo關閉。

您正在使用jQuery功能字符串！那是你misstake

檢查：http://jsfiddle.net/eFtWh/1/

而不是做：

inputActualName.toggle('slow');

務必：

$(inputActualName).toggle('slow');

來源

2013-05-27 18:36:54

太棒了，謝謝。我簡直不敢相信我是那麼近但沒有雪茄。 –

在複選框更改上切換相應的文本輸入

回答

相關問題