如何檢查是否一個textarea在JavaScript已經存在：檢查textarea的存在

我有2單選按鈕：

YES and NO

如果是的是點擊它會調用javascript函數showTxtbox（） ;如果沒有，則會調用 removeTxtbox（）;

showTxtBox（） - 如果單擊單選按鈕YES，則創建一個Textarea。 removeTxtbox（） - 如果單擊單選按鈕NO，則刪除Textarea。

<script type="text/javascript"> 
    function showTxtbox() 
     { 
      var p = document.getElementById("txtArea"); 
      var textarea = document.createElement('textarea'); 
      textarea.id = "txtRelativeAns"; 
      textarea.setAttribute('rows', '4'); 
      textarea.setAttribute('cols', '50'); 
      p.appendChild(textarea); 
     } 
    function removeTxtbox() 
     { 
      var p = document.getElementById("txtArea"); 
      var textarea = document.getElementById('txtRelativeAns'); 
      p.removeChild(textarea); 
     } 

</script>

我的問題是，當單選按鈕YES單擊兩次。它會創建2 textarea .. 如何檢查textarea是否已經存在..然後如果是，它將不再創建一個textarea。

謝謝！

來源

2013-07-18 QKWS

爲什麼你'jquery'標籤，如果你使用普通的JavaScript，jQuery的不？ – Barmar

是否要刪除該textarea或僅隱藏/顯示？我的意思是，你可以添加，從HTML和JavaScript只是添加屬性：顯示：無;或顯示：塊; – stefanz

解決你的問題檢查我的答案 –

<script type="text/javascript"> 
    function showTxtbox() 
     { 
      var p = document.getElementById("txtArea"); 
      if(!document.getElementById("txtRelativeAns")) { 
       var textarea = document.createElement('textarea'); 
       textarea.id = "txtRelativeAns"; 
       textarea.setAttribute('rows', '4'); 
       textarea.setAttribute('cols', '50'); 
       p.appendChild(textarea); 
      } 
     } 
    function removeTxtbox() 
     { 
      var p = document.getElementById("txtArea"); 
      var textarea = document.getElementById('txtRelativeAns'); 
      p.removeChild(textarea); 
     } 

</script>

來源

2013-07-18 07:06:45 FSou1

那快@ FSou1！謝謝！ – QKWS

希望它有幫助:) – FSou1

工作演示http://jsfiddle.net/p4HYv –

要獲得一個ID元素的數量，你可以使用：

$('#txtArea').length

來源

2013-07-18 07:06:54 OptimusCrime

$('textarea').length這會給你textarea的計數

來源

2013-07-18 07:07:07 FosterZ

你可以說...

if (!document.getElementById('txtRelativeAns')){ 
    // Add your textarea 
}

來源

2013-07-18 07:07:12 mohkhan

用jQuery風格替換一些代碼：

var p = $("#txtArea"); 

    function showTxtbox() 
    {  
     if($('#txtRelativeAns').length === 0) { 
      var new = $('<textarea></textarea>').attr({ 'rows' : '4', 'cols': '50', 'id' : 'txtRelativeAns' }); 
      p.appendChild(new); 
     } 
    } 

    function removeTxtbox() 
    { 
     $('#txtRelativeAns').remove(); 
    }

如果你只需要隱藏/顯示taxtarea，您可以一次在頁面加載與display: hidden風格創建並使用.hide()和.show()方法：

$('<textarea></textarea>') 
     .attr({ 'rows' : '4', 'cols': '50', 'id' : 'txtRelativeAns' }) 
     .appendTo("#txtArea") 
     .hide(); 

function showTxtbox() 
{ 
    $('#txtRelativeAns').show(); 
{ 

function removeTxtbox() 
{ 
    $('#txtRelativeAns').hide(); 
}

來源

2013-07-18 07:12:51 YD1m

創建單選按鈕單選按鈕組

<input type="radio" name="radio_group_name" id="radio_group_name" value="Yes" class="valuetext" >Yes 
<input type="radio" name="radio_group_name" id="radio_group_name" value="No" class="valuetext" >No

可以在onClick或onChange事件上調用此函數。

function buttonGroupChange(){ 
    var radioElements = document.getElementsByName("radio_group_name"); 
    for(var i = 0; i < radioElements.length; i++){ 
     if(radioElements[i].checked == true){ 

      if(radioElements[i].value=="yes") 
      { 
       //create textarea 
      } 
      else 
      { 
       //remove textarea 
      } 
     } 
     else{ 
      //do something 
     } 
    } 
}

來源

2013-07-18 07:18:45

工作演示http://jsfiddle.net/cse_tushar/up3TT/

HTML

<div id="txtArea"></div> 
<input type="radio" name="choice" value="yes">Yes 
<input type="radio" name="choice" value="no">No

JS

$(document).ready(function() { 
    function showTxtbox() { 
     var p = document.getElementById("txtArea"); 
     if (!document.getElementById("txtRelativeAns")) { 
      var textarea = document.createElement('textarea'); 
      textarea.id = "txtRelativeAns"; 
      textarea.setAttribute('rows', '4'); 
      textarea.setAttribute('cols', '50'); 
      p.appendChild(textarea); 
     } 
    } 

    function removeTxtbox() { 
     var p = document.getElementById("txtArea"); 
     var textarea = document.getElementById('txtRelativeAns'); 
     p.removeChild(textarea); 
    } 
    $("input[name='choice']").change(function(){ 
     if($(this).prop("checked") === true){ 
      if($(this).attr('value') == 'yes'){ 
       showTxtbox(); 
      }else if($(this).attr('value') == 'no'){ 
       removeTxtbox(); 
      } 
     } 
    }); 
});

來源

2013-07-18 07:22:16

替換爲以下功能。

function showTxtbox() 
     { 
      if($("#txtRelativeAns").length){ 
       return; 
      } 
      var p = document.getElementById("txtArea"); 
      var textarea = document.createElement('textarea'); 
      textarea.id = "txtRelativeAns"; 
      textarea.setAttribute('rows', '4'); 
      textarea.setAttribute('cols', '50'); 
      p.appendChild(textarea); 

     }

查看以下鏈接的例子：http://jsfiddle.net/8UqdV/2/

來源

2013-07-18 07:29:36

檢查textarea的存在

回答

HTML

JS

相關問題