用javascript清除数组和文本框

Clear array and text box with javascript

本文关键字：文本 清除数组 javascript      更新时间：2023-09-26

每次选中复选框时，将调用下面的函数。我的问题是，我需要另一个函数，应该清除所有可用的数据在这里。

让我先解释一下我的问题:

程序的概念是用复选框的值更新文本框——如果两个复选框被选中，那么文本框将有两个值，以此类推。

我需要一个函数来清除复选框上的数据，以便当我单击第3个复选框时，它需要通过从文本区域删除第一个和第二个来显示第3个复选框的值。这些都应该在不重新加载页面

的情况下发生。
<script>
    function chkcontrol(j){
        var textbox = document.getElementById("list");
        var textbox1 = document.getElementById("val_id");
        var values = [];    
        var val_id=[];
        if(document.getElementById(1).checked) {
            values.push('A1');
            val_id.push('1');
        }
        if(document.getElementById(2).checked) {
            values.push('A2');
            val_id.push('2');   }
        if(document.getElementById(3).checked) {
            values.push("A3");
            val_id.push('3');
        }
        if(document.getElementById(4).checked) {
            values.push("A4");
            val_id.push('4');
        }
        if(document.getElementById(5).checked) {
            values.push("A5");
            val_id.push('5');
        }
        if(document.getElementById(6).checked) {
            values.push("A6");
            val_id.push('6');
        }
        textbox.value = values.join(",");
        textbox1.value = val_id.join(",");
    }
    function removeAll(){
    }
</script>
<input id="list" type="text" name="list">
<input id="val_id" type="text" name="val_id">
<input type="checkbox" name="ckb" value="A1" id="1" onclick='chkcontrol(0)';>
<label for="1"></label>
<input type="checkbox" name="ckb" value="A2" id="2" onclick='chkcontrol(0)';>
<label for="2"></label>
<input type="checkbox" name="ckb" value="A3" id="3" onclick='chkcontrol(0)';>
<label for="3"></label>

我不知道你到底需要什么，但是如果你需要"清除"一个javascript数组，只需将长度设置为0(零)。

var a = [0,1,2,3,4,5,6,7,8,9];
a.length = 0; // truncate array

MDN说:"你可以设置length属性在任何时候截断一个数组。"

为了节省输入(并减少出错的机会)，应该使用循环访问元素，例如

for (var i=1; i<7; i++) {
  if (document.getElementById(i).checked) {
    values.push('A' + i);
    val_id.push('' + 1);
  }
}

如果元素在表单中，考虑将它们作为表单的命名属性访问，而不是多次调用getElementById:

var form = document.getElementById(formID);
...

但是，为了避免与控件的索引冲突，您需要分配一个不是数字的名称，因此，如果您将它们重命名为"input_1"等，那么您可以这样做:

  if (form['input_' + i].checked) {

将"textbox"(我猜这是一个输入类型text或textarea元素)的值设置为默认值:

textbox.value = textbox.defaultValue;
textbox1.value = textbox1.defaultValue;

要"清除"一个数组，要么将其长度设置为0:

values.length = 0;

或者用新的数组

替换它
values = [];

如果数组被多个变量引用，执行第一个;

我不知道为什么我只花了29分钟在你的代码，但这里无论如何。享受。未来的几个指针:

  1. 试着让你的脚本远离你的标记，即没有onclick事件，如果你要使用jQuery。
  2. 如果你发现自己在DOM元素的集合上做了无数的If语句，可能有一个更好的方法。

不管怎样，我要放下架子，下面是代码:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[type='"checkbox'"][name='"ckb'"]").click(function () {
                var values = [];
                var val_id = [];
                var checked = $("input[type='"checkbox'"][name='"ckb'"]:checked");
                if (checked.length < 3) {
                    checked.each(function (i, e) {
                        values.push($(e).val());
                        val_id.push($(e).prop("id"));
                    });
                } else {
                    values.push($(this).val());
                    val_id.push($(this).prop("id"));
                }
                $("input#list").val(values.join(","));
                $("input#val_id").val(val_id.join(","));
            });
        });
    </script>
</head>
<body>
    <input id="list" type="text" name="list">
    <input id="val_id" type="text" name="val_id">
    <input type="checkbox" name="ckb" value="A1" id="1">
    <input type="checkbox" name="ckb" value="A2" id="2">
    <input type="checkbox" name="ckb" value="A3" id="3">
</body>
</html>

和小提琴:http://jsfiddle.net/df59H/

如果你需要清除这些方框:

$("#someButtonId").click(function(){
    $("input#list").val("");
    $("input#val_id").val("");
});
相关文章：