Question

我开始使用Javascript，这是我的第三个项目（首先是我跟随的html5 canvas game tutorial，第二个是我一天制作的小工资计算器。

现在我正在开发Stargate SG1活动门。

我遇到了一个问题，我曾经控制过“旋转门”的地址，我在这里找到：How to check multiple checkboxes with JavaScript?

问题是，每次输入新值时，复选框的值，如我所知， .push ，但包含所有地址的数组按数字顺序设置它们。 / p>

所以如果我输入4-2-3-1我得到：1-2-3-4并且由于旋转部分是固定的，根据复选框值的符号永远不会结束到他应该的位置。

我尝试了其他数组方法，但我没有想到如何停止数组以数字顺序添加值。

这是代码，如果有人弄清楚我可能会做些什么改变：

function ChoixCoord(checkboxClass) {
var checkboxes = document.querySelectorAll('input[class="' + checkboxClass + '"]:checked'),
values = [];

Array.prototype.forEach.call(checkboxes, function(el) {
values.push(el.value);
});

	Coord1 = values[0];// These are values used to give position to rotating door, so symbols matchs the chevrons
	Coord2 = values[1];
	Coord3 = values[2];
	Coord4 = values[3];
	Coord5 = values[4];
	Coord6 = values[5];
	Coord7 = values[6];

alert(Coord1 + Coord2 + Coord3 + Coord4 + Coord5 + Coord6 + Coord7); // This is for test purpose
	
  
  


};

<!DOCTYPE html>
<html>
	<head>
	<title>Stargate</title>
	<link rel='stylesheet' type='text/css' href='style.css'/>
        <script type='text/javascript' src='js.js'></script>
	</head>
<body scroll="no" style="overflow:hidden">


<form class="panneauDHD" name="dhd">
<input type="checkbox" class="checkSymbole" id="s1" name="checkSymbole1" value="1" onClick="return KeepCount()"></input><label class="s1" for="s1"></label>
<input type="checkbox" class="checkSymbole" id="s2" name="checkSymbole2" value="2" onClick="return KeepCount()"></input><label class="s2" for="s2"></label>
<input type="checkbox" class="checkSymbole" id="s3" name="checkSymbole3" value="3" onClick="return KeepCount()"></input><label class="s3" for="s3"></label>
<input type="checkbox" class="checkSymbole" id="s4" name="checkSymbole4" value="4" onClick="return KeepCount()"></input><label class="s4" for="s4"></label>
<input type="checkbox" class="checkSymbole" id="s5" name="checkSymbole5" value="5" onClick="return KeepCount()"></input><label class="s5" for="s5"></label>
<input type="checkbox" class="checkSymbole" id="s6" name="checkSymbole6" value="6" onClick="return KeepCount()"></input><label class="s6" for="s6"></label>
<input type="checkbox" class="checkSymbole" id="s7" name="checkSymbole7" value="7" onClick="return KeepCount()"></input><label class="s7" for="s7"></label>
<input type="checkbox" class="checkSymbole" id="s8" name="checkSymbole8" value="8" onClick="return KeepCount()"></input><label class="s8" for="s8"></label>

<input type="button" id="lancement" value="Lancer la mission" onClick="ChoixCoord('checkSymbole');">

</form>

			
	</body>
</html>

提前感谢您的帮助！

Answer 1

我认为你需要考虑不同的方法。

从复选框和按钮中删除onClick函数然后创建函数，该函数将在对数组进行检查时按顺序添加复选框

var checked = [];

$('.checkSymbole').change(function(e) {
    var checkbox = $(this);
    var value = $(this).val();
    var index;

    /*
     * if checkbox is checked add to array 
     * else remove it
     */
    if (checkbox.is(':checked')) {
        checked.push(value);
    } else {
        index = checked.indexOf(value);  // find index of value in array
        checked.splice(index, 1); // remove it
    }

    console.log(checked); // you can see how values in array are removed/ added
});

我希望它会有所帮助

复选框：使用Array.prototype.forEach.call推送检查订单，

1 个答案: