如何輸入多個複選框值到通過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語句;這將不會非常有效，因爲會有數千個排列組合。

我也想搞清楚如果使用數組可以簡化這個工作;我真的不知道如何以最簡單的方式來概念化這一點，因爲我只做了三個星期的寫作。如果有人能告訴我如何思考這個問題，我將不勝感激。想要了解如何做到這一點，我可以爲這些論壇做出貢獻，並簡化腳本編寫過程，因爲我沒有編碼背景。

Answer 1

如果你可以使用jQuery，你不會需要太多的代碼：

每當有人點擊複選框（​​），你可以更新的結果。

我個人會使用<label>元素，但那只是我。 http://jsfiddle.net/HarryPehkonen/zNfju/1/

Answer 2

我有一些小的修改您的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); 
    } 
} 

，並具有：您可以通過

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

這裏是一個工作示例搶值看看​​remove_item

Answer 3

這是另一種方法。

// 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); 
} 

這基本上計算所有的複選框，通過所有循環，檢查他們是否checked，得到name屬性的值，然後將其追加到由;

的jsfiddle分隔的字符串：http://jsfiddle.net/mcDvw/

---

或者，您可以將所需的所有值設置爲複選框的值屬性，並讀取該值，而不是在JS變量中具有值。例如

HTML：

<input onclick="ATHD()" id="1" type="checkbox" name="pr" value="Password Reset" />&#160;Password Reset<br /> 
<input onclick="ATHD()" id="2" type="checkbox" name="ps" value="Password Setup" />&#160;Password Setup<br /> 

JS：

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

的jsfiddle：http://jsfiddle.net/mcDvw/1/