用JS将HTML清单元素推入数组

Pushing HTML checklist elements into an array with JS

本文关键字：元素 数组 JS HTML 单元素      更新时间：2023-09-26

我希望我的检查表能够记住选中选项的值。每当用户选中复选框时，我希望将值压入数组，每当他取消选中复选框时，我希望将其删除。对于提交按钮，我想为每个选中的元素显示一个警告。

可以填充数组，但由于某种原因，它会覆盖前面的元素。此外，它不会对"未选中状态"做出反应，也不会在提交时显示任何内容。注意:我需要这个工作大约200个输入后。

<h1>Checklist</h1>
<form>
    <input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value)" value="F-Card geholt">F-Card geholt<br>
    <input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value)" value="Ersti Rally">Ersti Rally <br>
    <input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value)" value="TEST">TEST<br>
</form>
<script type="text/javascript">
    var checkbox = document.getElementsByName("remember");
    var checkboxArray = [];
    function checkboxFunction(value)
    {
        for(var i=0, length=checkbox.length; i<length; i++)
        {
            if(checkbox[i].checked)
            {
                checkboxArray.push(value);
            }
            else if (!checkbox[i].checked && value == checkboxArray[i])
            {
                checkboxArray.splice(value);
            }
        }
    }
    function alertFunction()
    {
        for(var i=0, length=checkbox.length; i<length; i++)
        {
            if (typeof checkboxArray[i] != 'undefined') 
            {
                alert(checkboxArray[i]); 
            }
        }   
    }
</script>
<input type="button" name="alert" value="Submit" onclick="alertFunction()">

移动var checkboxArray = [];在checkboxFunction函数之外

<script type="text/javascript">
        var checkboxArray = [];
    function checkboxFunction(value)
    {
        var checkbox = document.getElementsByName("remember");

        for(var i=0, length=checkbox.length; i<length; i++)
        {
            if(checkbox[i].checked)
            {
                checkboxArray.push(value);
            }
            else if (!checkbox[i].checked && value == checkboxArray[i])
            {
                checkboxArray[i] = null;
            }
            //alert(checkboxArray[i]); 
        }
    }
    function alertFunction()
    {
        for(var i=0, length=checkboxArray.length; i<length; i++)
        {
            alert(checkboxArray[i]); 
        }   
    }
</script>
相关文章：