0

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

谢谢！

4

8 回答 8

4 
<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-18T07:06:45.697 回答
4

你可以说...

if (!document.getElementById('txtRelativeAns') ){
    // Add your textarea
}
于 2013-07-18T07:07:12.023 回答
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/

于 2013-07-18T07:29:36.053 回答
2

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

$('#txtArea').length
于 2013-07-18T07:06:54.020 回答
2

$('textarea').length这会给你 textarea 的计数

于 2013-07-18T07:07:07.940 回答
2

工作演示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-18T07:22:16.233 回答
1

用 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-18T07:12:51.707 回答
1

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

<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-18T07:18:45.773 回答