Question

一些背景信息 - 我们使用的系统开发人员离开了公司，我被要求添加一些新功能。毋庸置疑，没有文档，更糟糕的是，我是一个绝对的新手，因此我必须学习。我有点做大部分工作，但完全坚持这个问题。对于任何一个足以帮助我的人来说，如果你真的可以愚蠢地回答任何问题，那就太棒了。所以，问题........

使用项列表动态填充的HTML页面。对于列表中的每个项目，都有一个复选框，对于勾选的每个复选框，我需要更新MySQL数据库。将复选框添加到页面的代码是

echo("<td class=\"tableRight\" style=\"width: 5%\"><input type=\"checkbox\" name=\"costume[]\" value=\"".$costume['id']."\" id=\"costume_".$costume['id']."\" onclick=\"tickrow(".$costume['id'].");\" /></td>");

JavaScript文件使用

加载到页眉中

<script src=\"costume-list.js\" type=\"text/javascript\"></script>

应该启动数据库更新的按钮代码是

echo("<div class=\"navContainer\" onClick=\"batch_move() \" class=\"navItem\">");
echo("<img src=\"/resource/img/icon/move.png\" border=\"0\" /><br />Batch Move Costumes");
echo("</a></div>");

最后我设法组建的JavaScript是

function batch_move() {

var combo = document.getElementById("cbo_title");
var move_to = combo.options[combo.selectedIndex].text;
var move_to_id = combo.options[combo.selectedIndex].value;

if (move_to.length==0) {
alert("Please select the location you want to move the costumes to.");
return;
}

var resp_move = confirm("Are you sure you want to MOVE the selected costumes to "+move_to+" ?");

if (resp_move==true) { 
   alert("Lets move em");
   window.open ("http://path-to-server/costume/batch-move-costume.php?  loc="+move_to_id+"&items="+INeedTheArrayHere,"mywindow","menubar=1,resizable=1,width=350,height=250");
}

}

所以我想做的是首先确保勾选至少一个复选框，如果是，则将勾选框的值放入数组中以传递给调用的PHP表单。我可以在打开的表单中管理更新代码，它只是将数组添加到它。

很抱歉很长的帖子，但希望有足够的信息。如果您还需要了解其他信息，请询问并提供更多详细信息。非常感谢

Answer 1

首先，你有最深切的同情。把这些烂摊子扔在你身上真是太糟糕了。这应该有所帮助：

var valString = "";
var list = document.querySelectorAll('input[type ="checkbox"]');
for(var node in list) {
    if(list[node].checked) {
        valString += list[node].name + ','; 
        //you will need to add a name property when you create the html
        //<input type='checkbox' name='dress'>Dress
    }
}

这将创建一个逗号分隔的字符串，其中包含您可以发送到服务器的所有已选中复选框值。您可以将其拆分为服务器端的阵列。您将无法将数组放入网址的GET部分，就像您拥有的那样＃IneedArrayHere＆＃39;上面，因此字符串。此外，如果选择太多（URLS有长度限制），您需要从GET切换到POST，这是另一个问题。

P.S。我强烈建议您使用所有那些转义的双引号并将它们作为未转义的单引号。这种事情是由习惯于SQL种类的人完成的，其中单引号和双引号之间的差异很大，但在javascript和大多数（所有？）服务器端语言（如php）差异无关紧要。

Answer 2

<script>
function myFunction()
{
    var collection =document.getElementById("boxes").getElementsByTagName('INPUT');
    var res =[];
    for (var x=0; x < collection.length; x++) {
        if (collection[x].type.toUpperCase()=='CHECKBOX')
            var b = [collection[x].name ,collection[x].checked ] ;
            res[res.length] = b;
    }
    alert(JSON.stringify(res));
}
</script>
<html>
<div id="boxes">
<input type="checkbox" name="1" value="1">eded</input>
<input type="checkbox" name="2" value="2">eded</input>
</div>

<input type="button" onclick="myFunction()" value="ok">
<html>

现在您只需将JSON发送到服务器即可。

Answer 3

非常感谢你的回答。我已将您的代码插入JavaScript并勾选了表单上的一些复选框。当代码运行时，我得到第一个提示消息，但不是消息框，其值为valString？。

这显然是我做错了 - 正如我所说，我完全是新手，并且正在努力掌握这个我似乎继承的系统（不是通过选择！）

当前代码看起来像这样，任何指向我最新错误的指针都会非常感激

function batch_move() {

var combo = document.getElementById("cbo_title");
var move_to = combo.options[combo.selectedIndex].text;
var move_to_id = combo.options[combo.selectedIndex].value;

if (move_to.length==0) {
alert("Please select the location you want to move the costumes to.");
return;
}

var resp_move = confirm("Are you sure you want to MOVE the selected costumes to "+move_to+" ?");

var valString = "";
var list = document.querySelectorAll('input[type ="checkbox"]');
for(var node in list) {
if(list[node].checked) {
valString += list[node].name + ','; 
}
}

alert(valString);

if (resp_move==true) { 
alert("Lets move em");
window.open ("http://path-to-server/costume/batch-move-costume.php?loc="+move_to_id+"&items=2,3,4,5","mywindow","menubar=1,resizable=1,width=350,height=250");
}

}

从Javascript获取并传递数组值

3 个答案: