jQuery：當點擊複選框時，下面的輸入框將會顯示

Question

我不是很擅長jQuery，所以我有一個問題;有沒有一個快速的代碼編寫方式，當你點擊一個複選框時（同樣爲1），下面會出現一個文本框。

我目前正在學習jQuery，所以這將是一個很好的例子。

在此先感謝！

Answer 1

$("#yourCheckboxId").change(function(){ 
    if ($("#yourCheckboxId").is(":checked")){ 
     $("#yourTextBoxId").show(); 
    } 
}); 

，如果你想，當你打開復選框關閉其隱藏文本框：

這是假設你有在烏拉圭回合的HTML文本框，有一個唯一的ID，並最初是隱藏（「顯示：無」），並您有唯一的ID一個複選框，可見最初

Answer 2

$('input:checkbox').change(function() { 
    if ($(this).is(':checked') && !$(this).next().is('textarea')) { 
     $(this).after($('<textarea>')); 
     // OR $('<textarea>').insertAfter(this); 
    } 
}); 

埃文版本顯示了一個預先存在的版本，礦山創建它，你可以結合兩者;）

Answer 3

如果您希望完全動態地執行此操作，您需要使用2種方法。

1. .after^docs
2. .remove^docs

你可以決定是否複選框已被選中，及後若它如此添加文本框，或者如果它已被選中和文本框已經存在，如果這樣刪除它。這歸結爲代碼：

$('input[type=checkbox]').click(function(){ 
    if($(this).is(':checked')){ 
      var tb = $('<input type=text />'); 
      $(this).after(tb) ; 
    } 
    else if($(this).siblings('input[type=text]').length>0){ 
     $(this).siblings('input[type=text]').remove(); 
    } 
}) 

活生生的例子：http://jsfiddle.net/KQ56P/

Answer 4

另一種方式（http://jsfiddle.net/3r6nb/）：

//html 
<div> 
    <input id="check" type="checkbox"/> 
    <input id="text" type="text" class="hidden"/> 
</div> 

//css 
.hidden 
{ 
/*hides any element given this class, you may also want to set 
    display:none; as hidden elements still take up space*/ 
    visibility:hidden; 
} 
.visible 
{ 
    visibility:visible;/*set display:inherit; if using display:none; above*/ 
} 

//javascript 
$("#check").change(function() { 
    //toggleClass() removes the class from the element if it 
    //exists or adds it if it doesn't 
    $("#text").toggleClass('hidden'); 
    $("#text").toggleClass('visible'); 
});