用javascript清除数组和文本框答案

【问题标题】：Clear array and text box with javascript用javascript清除数组和文本框
【发布时间】：2013-04-05 00:48:14
【问题描述】：

每次选中复选框时，都会调用以下函数。我的问题是我需要另一个函数来清除此处的所有可用数据。

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

程序的概念是用复选框值来更新文本框——如果选中了两个复选框，那么文本框里面就会有两个值，以此类推。

我需要一个函数来清除复选框上的数据，这样当我单击第三个复选框时，它只需要通过从文本区域中删除第一个和第二个复选框来显示第三个复选框的值。这一切都应该在不重新加载页面的情况下发生

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

【问题讨论】：

我在这里没有看到任何 jQuery 哦

标签： javascript jquery checkbox

【解决方案1】：

我不知道你究竟需要什么，但如果你需要“清除”一个 javascript 数组，只需将长度设置为 0（零）。

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

MDN 说： “您可以随时设置长度属性来截断数组。”

希望对你有帮助...

【讨论】：

让我给你一些屏幕截图，以便你能发现我的问题

【解决方案2】：

为了节省一些输入（并且减少出错的机会），应该使用循环访问元素，例如

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.value = textbox.defaultValue;
textbox1.value = textbox1.defaultValue;

要“清除”一个数组，请将其长度设置为 0：

values.length = 0;

或者只是用一个新数组替换它

values = [];

如果数组被多个变量引用，做第一个；否则两者都行。

【讨论】：

看看下面的例子，我需要具有附加功能的相同类型的代码..

【解决方案3】：

我不知道为什么我只花了 29 分钟在你的代码上，但无论如何都是这样。享受。对未来的几点建议：

如果您要使用 jQuery，请尽量让您的脚本远离您的标记，即没有 onclick 事件。
如果您发现自己对 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("");
});

【讨论】：

是的，这是我需要的，但还有更多功能。我还有 300 个复选框，我可以选择其中的任何一个。我需要以休闲方式使用该功能。首先我需要一个如果我选择 3 个复选框并单击该按钮，则下一步包含在此页面中的按钮它将执行我需要的一些操作。稍后，当我单击第 4 个复选框时，它只需要显示第 4 个复选框，依此类推。所以我需要明确一点，当我点击按钮时是可能的
只要把它们命名为ckb，你可以根据需要添加多少，它会适应。很高兴能提供帮助。
通过基本更改，即
我理解逻辑，但是当我单击按钮时，需要清除数组，以便我可以选择其他复选框。如何清除两个数组
数组只存在于点击事件中，不需要清除。完成后您需要清除文本框，上面的代码...