Javascript 使用getElementsByName将TextBox替换为复选框_Javascript_Html

Javascript 使用getElementsByName将TextBox替换为复选框

javascript html

Javascript 使用getElementsByName将TextBox替换为复选框,javascript,html,Javascript,Html,我有一个名字很长的文本框。我试图在页面加载时用一个复选框动态替换它。下面是代码。我试着只用电话线 document.getElementsByName("!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2")[0].style.display="none" 在我的javascript中，但即使这样也不起作用。所以我想这是有问题的 document.getElementsByName() <html> &l

我有一个名字很长的文本框。我试图在页面加载时用一个复选框动态替换它。下面是代码。我试着只用电话线

document.getElementsByName("!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2")[0].style.display="none"

在我的javascript中，但即使这样也不起作用。所以我想这是有问题的

document.getElementsByName()


        <html>
    <head>
    <script type="text/javascript">
    $(document).ready(function()
    {
    //var a="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2";
     var myElement = document.createElement('<input type="checkbox" name="vehicle" value="Bike" id="checkPub"/>');
     document.getElementsByName("!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2")[0].insertAdjacentElement('afterEnd', myElement); 
    document.getElementsByName("!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2")[0].style.display="none";



    });
    </script>
    </head>
    <body>
    <input type="text" name="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2" value="1"  />
    </body>

</html>

document.getElementsByName（）
$（文档）.ready（函数（）
{
//变量a=“！SRC！SKU！U_计划活动！E！amrit_测试搜索！U！2”；
var myElement=document.createElement（“”）；
document.getElementsByName（“！SRC！SKU！U_PLANNEDACTIVITY！E！amrit_test_search！U！2”）[0]。InsertAdjaceEntelement（'afterEnd'，myElement）；
document.getElementsByName（“！SRC！SKU！U_PLANNEDACTIVITY！E！amrit_test_search！U！2”）[0]。style.display=“无”；
});

您不能像那样使用document.createElement

检查：

所以你需要这样的东西：

var myElement = document.createElement('input');
myElement.type = "checkbox";
myElement.name = "vehicle";
myElement.value = "Bike";
myElement.id = "checkPub";

<html>
    <head>
        <script type="text/javascript">
        function onLoad() {
            var a="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2";
            var myElement = document.createElement('input');
            myElement.type = "checkbox";
            myElement.name = "vehicle";
            myElement.value = "Bike";
            myElement.id = "checkPub";
            var origelem = document.getElementsByName(a)[0];
            origelem.insertAdjacentElement('afterEnd', myElement);
            origelem.style.display="none";
        }
        </script>
    </head>
    <body onload="onLoad()">
        <input type="text" name="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2" value="1"  />
    </body>
</html>

此外，只查找元素一次并将字符串存储在变量中也不会有什么坏处：

var a="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2";
var origelem = document.getElementsByName(a)[0];
origelem.insertAdjacentElement('afterEnd', myElement);
origelem.style.display="none";

另外，您似乎正在使用jQuery（从

$（document）.ready（…

）。如果您没有使用jQuery，请尝试以下操作：

var myElement = document.createElement('input');
myElement.type = "checkbox";
myElement.name = "vehicle";
myElement.value = "Bike";
myElement.id = "checkPub";

<html>
    <head>
        <script type="text/javascript">
        function onLoad() {
            var a="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2";
            var myElement = document.createElement('input');
            myElement.type = "checkbox";
            myElement.name = "vehicle";
            myElement.value = "Bike";
            myElement.id = "checkPub";
            var origelem = document.getElementsByName(a)[0];
            origelem.insertAdjacentElement('afterEnd', myElement);
            origelem.style.display="none";
        }
        </script>
    </head>
    <body onload="onLoad()">
        <input type="text" name="!SRC!SKU!U_PLANNEDACTIVITY!E!amrit_test_search!U!2" value="1"  />
    </body>
</html>

是一个很好的替代品。

它只在ie和chrome中工作，而不是在mozilla中：（。我看到了一个小小的变化。在使用google之后，我发现这个功能没有在ff中实现。不过，还有其他选择。我会为您创建一个功能。