检查textarea是否已存在

Question

如何检查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>

我的问题是，单击单选按钮是两次。它将创建2 textarea .. 我如何检查textarea是否已经存在..如果是，它将不再创建textarea。

谢谢！

Answer 1

<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>

Answer 2

你可以说......

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

Answer 3

替换为以下功能。

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/

Answer 4

要获取具有id的元素数量，您可以使用：

$('#txtArea').length

Answer 5

$('textarea').length这将为您提供textarea的计数

Answer 6

工作演示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();
            }
        }
    });
});

Answer 7

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

Answer 8

创建单选按钮为单选按钮组

<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
        }
    }
}