时间戳

首页 > 解决方案 > javascript中复选框的奇怪行为

javascript - javascript中复选框的奇怪行为

问题描述

我正在尝试创建一个 Web 应用程序来自定义马头像，所以我有一个画布，其中加载了马的一部分，面部标记是可以通过复选框选择然后加载到画布内的部分之一。允许用户选择多个复选框，因此加载多个标记面。

当我选中多个复选框时，假设我已按顺序选中复选框 1、2 和 3，图像在画布内加载就好了，但是当我取消选中复选框 1 时，不是删除与复选框 1 相关的图像，而是删除与复选框相关的图像到我点击的最后一个复选框 3。我不知道我是否很好地解释了这个问题，但这里有一个显示问题的短视频：https ://youtu.be/_gPSCuJusqc

这是我为javascript中的所有复选框编写的代码：

           document.getElementById('markingBtn15').addEventListener('change', function() {
         
        if (k15.checked==true){
            matrixIndex=14;
            markingMatrix[matrixIndex][0].src="https://cdn.shopify.com/s/files/1/0591/0741/0083/files/lowresmarking15.png"
        markingMatrix[matrixIndex][0].onload = function(){
            
            buildhorse();
        }
        }else{
            markingMatrix[matrixIndex][0].src="";
            
            buildhorse();
        
        }
        });

标签： javascript

解决方案

根据给定的少量代码，很难准确地确定您要做什么，但是如果您要拥有一堆复选框，您可能希望拥有一些布尔值的全局数组来跟踪哪个框被检查，哪个不是。

var boxValues = [true, false, false, false, false];

然后是一组匹配的图像

var images = [image1, image2, image3, image4, image5];

然后每次单击一个框时，将其映射到一个索引值并使用该索引值来更新 boxValues 和图像并刷新屏幕，以使一切保持同步。

这些帮助有用？

推荐阅读