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

Question

这是我的代码:

<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>

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

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

我也在尝试弄清楚使用数组是否可以简化它；我不太确定如何以最简单的方式将其概念化，因为我只做了三个星期的 JavaScript。如果有人能告诉我如何考虑这一点，我将不胜感激。更多地了解如何执行此操作，以便我可以为这些论坛做出贡献并简化脚本功能的过程，因为我没有编码背景。

Answer 1

如果你会使用 jQuery，你将不需要太多代码:

只要有人点击复选框 ($('input').on('click', function() {)，您就可以更新结果。

我个人会使用 <label>元素，但那只是我。你可以通过

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

这是一个工作示例:http://jsfiddle.net/HarryPehkonen/zNfju/1/