Question

每次选中复选框时，都会调用以下函数。我的问题是我需要另一个功能，它应该清除这里可用的所有数据。

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

程序的概念是使用复选框值更新文本框 - 如果选中了两个复选框，则文本框中将包含两个值，依此类推。

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

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

Answer 1

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

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

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

希望它对你有所帮助......

Answer 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) {

将“文本框”（我猜这是输入类型文本或textarea元素）的值设置为默认值：

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

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

values.length = 0;

或者只是用新数组替换它

values = [];

如果数组被多个变量引用，请先执行;否则将会这样做。

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

使用javascript清除数组和文本框

3 个答案: