如何通过javascript将多个复选框值输入到隐藏的文本框中

这是我的密码：

<script type="text/javascript" xml:space="preserve">

function ATHD(f) {

var aa = "I would like help with the following topic(s): "
var bb = "Password Reset "
var cc = "Password Setup " 
var dd = "Firmware Upgrade (if applicable) "
var ee = "Local Access Setup "
var ff = "Remote Access Setup "
var gg = "Mobile Access Setup "
var hh = "Recording Schedule Setup "
var ii = "How to playback video "
var jj = "How to convert video "
var kk = "Email Notification Setup "
var ll = "PTZ Setup (if applicable) "

if( f.pr.checked == true) {
    f.sup.value = aa + bb;
}
if( f.ps.checked == true) {
    f.sup.value = aa + cc;
}


}

</script>
<form><input onclick="ATHD(this.form)" id="1" type="checkbox" name="pr" />&#160;Password Reset<br />
<input onclick="ATHD(this.form)" id="2" type="checkbox" name="ps" />&#160;Password Setup<br />
<input onclick="ATHD(this.form)" id="3" type="checkbox" name="fu" />&#160;Firmware Upgrade (if applicable)<br />
<input onclick="ATHD(this.form)" id="4" type="checkbox" name="la" />&#160;Local Access Setup<br />
<input onclick="ATHD(this.form)" id="5" type="checkbox" name="ra" />&#160;Remote Access Setup<br />
<input onclick="ATHD(this.form)" id="6" type="checkbox" name="ma" />&#160;Mobile Access Setup<br />
<input onclick="ATHD(this.form)" id="7" type="checkbox" name="rss" />&#160;Recording Schedule Setup<br />
<input onclick="ATHD(this.form)" id="8" type="checkbox" name="pb" />&#160;How to playback video<br />
<input onclick="ATHD(this.form)" id="9" type="checkbox" name="cv" />&#160;How to convert video<br />
<input onclick="ATHD(this.form)" id="10" type="checkbox" name="en" />&#160;Email Notification Setup<br />
<input onclick="ATHD(this.form)" id="11" type="checkbox" name="ptz" />&#160;PTZ Setup (if applicable)<br />
<br />
<span style="FONT-WEIGHT: bold">Question</span><span style="COLOR: #ff0000">*</span> (please be specific)<br />
<br />
<textarea style="HEIGHT: 164px; WIDTH: 577px" rows="10" cols="40">
</textarea></p>

<p><button>Continue...</button> 
<textarea style="HEIGHT: 164px; DISPLAY: hidden; WIDTH: 577px" rows="10" cols="40" name="sup">
</textarea>
 &#160;</p>
</form>

功能ATHD（f）{
var aa=“我想获得以下主题的帮助：”
var bb=“密码重置”
var cc=“密码设置”
var dd=“固件升级（如果适用）”
var ee=“本地访问设置”
var ff=“远程访问设置”
var gg=“移动访问设置”
var hh=“录制时间表设置”
var ii=“如何播放视频”
var jj=“如何转换视频”
var kk=“电子邮件通知设置”
var ll=“PTZ设置（如适用）”
如果（f.pr.checked==真）{
f、 辅助值=aa+bb；
}
如果（f.ps.checked==真）{
f、 辅助值=aa+cc；
}
}
 密码重置

 密码设置

 固件升级（如适用）

 本地访问设置

 远程访问设置

 移动访问设置

 录制时间表设置

 如何播放视频

 如何转换视频

 电子邮件通知设置

 云台设置（如适用）



问题*（请具体说明）




继续。。。
 

基本上，我要做的是，每当选中一个复选框时，我希望将复选框的值添加到一个隐藏字段中。我知道我仍然需要在html代码中添加“value=[复选框的值]”；我想允许选中多个复选框，以便将多个项目添加到文本框中

我理解这样做的一个方法是为每一个可能的变化创建if-then语句；这并不是很有效，因为会有成千上万的排列

---

我还试图弄清楚使用数组是否可以简化这一过程；我真的不知道如何以最简单的方式将其概念化，因为我只做了三周的javascripting。如果有人能告诉我如何思考这个问题，我将不胜感激。希望了解更多如何做到这一点，以便我能够为这些论坛做出贡献，并简化脚本编写功能的过程，因为我没有编码方面的背景。

如果您可以使用jQuery，您将不需要太多代码：

只要有人点击复选框（

$（'input'）。点击（'click'，function（）{

），您就可以更新结果

我个人会使用

元素，但那只是我自己。你可以通过

$('input:checked').each(function() {
    values.push($(this).parent().text());
});

---

下面是一个工作示例：

如果可以使用jQuery，则不需要太多代码：

只要有人点击复选框（

$（'input'）。点击（'click'，function（）{

），您就可以更新结果

我个人会使用

元素，但那只是我自己。你可以通过

$('input:checked').each(function() {
    values.push($(this).parent().text());
});

---

下面是一个工作示例：

我对您的dom做了一些小的更改，比如删除onclick事件，这可能会解决您的问题

var arr = [];
remove_item = function(arr,value){
    for(b in arr ){
        if(arr[b] == value){
            arr.splice(b,1);
            break;
        }
    }
    return arr;
}
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
    if(inputs[i].getAttribute('type') == 'checkbox')
    {  inputs[i].addEventListener("change",function() {
        if(this.checked)
            arr.push(parseInt(this.id));
        else
        {
            remove_item(arr,parseInt(this.id));
        }
            console.log(arr);  document.getElementById("chcbx").value = arr.join(",");
        },false);
    }
}

var arr=[]；
删除项目=功能（arr，值）{
对于（arr中的b）{
if（arr[b]==值）{
阵列拼接（b，1）；
打破
}
}
返回arr；
}
var inputs=document.getElementsByTagName（“输入”）；
对于（var i=0；i我对dom做了一些小的更改，比如删除onclick事件，它可能会解决您的问题

var arr = [];
remove_item = function(arr,value){
    for(b in arr ){
        if(arr[b] == value){
            arr.splice(b,1);
            break;
        }
    }
    return arr;
}
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
    if(inputs[i].getAttribute('type') == 'checkbox')
    {  inputs[i].addEventListener("change",function() {
        if(this.checked)
            arr.push(parseInt(this.id));
        else
        {
            remove_item(arr,parseInt(this.id));
        }
            console.log(arr);  document.getElementById("chcbx").value = arr.join(",");
        },false);
    }
}

var arr=[]；
删除项目=功能（arr，值）{
对于（arr中的b）{
if（arr[b]==值）{
阵列拼接（b，1）；
打破
}
}
返回arr；
}
var inputs=document.getElementsByTagName（“输入”）；
对于（var i=0；i，这里有另一种方法

// find number of checkboxes (you haven't specified if you 
// have a set number or not. If you have a set number, just 
// set checkboxCount to whatever number you have.
var checkboxCount = 0;
var inputTags = document.getElementsByTagName('input');
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}

function ATHD() {
    var totalValue = '';
    for (var i = 1; i < checkboxCount; i++) {
        if (document.getElementById(i).checked)
            totalValue += inputTags[i].getAttribute("name") + ';';
    }
    document.getElementById("hdnValues").value = totalValue;
    alert(totalValue);
}

JS:

函数ATHD（）{
var totalValue=''；
对于（变量i=1；i

jsfiddle:
这里是另一种方法

// find number of checkboxes (you haven't specified if you 
// have a set number or not. If you have a set number, just 
// set checkboxCount to whatever number you have.
var checkboxCount = 0;
var inputTags = document.getElementsByTagName('input');
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}

function ATHD() {
    var totalValue = '';
    for (var i = 1; i < checkboxCount; i++) {
        if (document.getElementById(i).checked)
            totalValue += inputTags[i].getAttribute("name") + ';';
    }
    document.getElementById("hdnValues").value = totalValue;
    alert(totalValue);
}

JS:

函数ATHD（）{
var totalValue=''；
对于（变量i=1；i

jshiddle:
您需要一个隐藏的输入字段，因为文本区域并不隐藏。
。此外，如果复选框未选中，您是否希望将复选框的值从隐藏文本中删除？这实际上是比较困难的部分。将所有值放入一个隐藏输入的最终目的是什么？也许我们可以提出更好的解决方案。我正在为我们的技术支持网站构建一个表单模型；我们有一个基本主题的标准化文档列表，我想让我们的客户选择，这样我们的代理就可以提前发送这些文档。我忘了输入html“display:none”；这实际上将是一个字段，我们最终将对其进行编程以对应于数据表，但对于模型，我只是使用一个文本区域。我更担心的是如何让多个复选框值输入到文本字段中，而不必编写大量脚本。您将需要一个隐藏的输入字段，因为文本区域不是t hidden.
。另外，如果复选框被取消选中，您是否希望将复选框的值从隐藏文本中删除？这实际上是比较困难的部分。将所有值放入一个隐藏输入的最终目的是什么？也许我们可以建议一个更好的解决方案。我正在为我们的技术支持构建一个表单模型ort网站；我们有一个基本主题的标准化文档列表，我想让我们的客户选择，这样我们的代理就可以提前发送这些文档。我忘了在html中输入“display:none”；这实际上是一个字段，我们将最终编程以对应数据表，但对于