Как ввести многократный Флажок значения в скрытое текстовое поле через

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-коде; то, что я хочу разрешить, выбрано несколько флажков, чтобы в текстовое поле было добавлено несколько элементов.

Я понимаю, что одним из способов сделать это было бы создание операторов if-then для всех возможных вариантов; это не будет очень эффективным временем, так как будут тысячи перестановок.

Я также пытаюсь выяснить, использует ли массив массив, чтобы упростить это; Я не совсем уверен, как концептуализировать это простейшим способом, поскольку я занимаюсь только javascripting в течение трех недель. Если кто-то скажет мне, как об этом думать, я бы очень признателен. Глядя больше узнать, как это сделать, поэтому я могу внести свой вклад в эти форумы и упростить процесс создания скриптов, поскольку у меня нет фона в кодировании.

Answer 1

Если вы можете использовать JQuery, вам не нужно будет много коды:

Вы можете обновить результаты всякий раз, когда кто-то нажимает на флажке ($('input').on('click', function() {).

Я лично использовал бы элементы <label>, но это только я. Вы можете захватить значения по

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

Вот рабочий пример: http://jsfiddle.net/HarryPehkonen/zNfju/1/

Answer 2

Я сделал небольшие изменения ваш РОМ как удаление 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); 
    } 
} 

и имеют a посмотреть на jsFiddleremove_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/

---

В качестве альтернативы вы можете установить все значения, которые вы хотите, в атрибут value этого поля и прочитать, что вместо значения в переменной 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/