[英]How to input multiple checkbox values into a hidden textbox via 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" /> Password Reset<br />
<input onclick="ATHD(this.form)" id="2" type="checkbox" name="ps" /> Password Setup<br />
<input onclick="ATHD(this.form)" id="3" type="checkbox" name="fu" /> Firmware Upgrade (if applicable)<br />
<input onclick="ATHD(this.form)" id="4" type="checkbox" name="la" /> Local Access Setup<br />
<input onclick="ATHD(this.form)" id="5" type="checkbox" name="ra" /> Remote Access Setup<br />
<input onclick="ATHD(this.form)" id="6" type="checkbox" name="ma" /> Mobile Access Setup<br />
<input onclick="ATHD(this.form)" id="7" type="checkbox" name="rss" /> Recording Schedule Setup<br />
<input onclick="ATHD(this.form)" id="8" type="checkbox" name="pb" /> How to playback video<br />
<input onclick="ATHD(this.form)" id="9" type="checkbox" name="cv" /> How to convert video<br />
<input onclick="ATHD(this.form)" id="10" type="checkbox" name="en" /> Email Notification Setup<br />
<input onclick="ATHD(this.form)" id="11" type="checkbox" name="ptz" /> 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>
 </p>
</form>
基本上,我想做的就是每當選中一個復選框時,都希望將復選框的值添加到隱藏字段中。 我了解我仍然需要在html代碼中添加“ value = [復選框的值]”; 我要允許的是選中多個復選框,以便將多個項目添加到文本框中。
我知道,這樣做的一種方法是為每個可能的變體創建if-then語句; 這將不是很有效,因為會有數千種排列。
我還試圖弄清楚使用數組是否可以簡化此過程。 我不太確定如何以最簡單的方式將其概念化,因為我僅進行了3周的JavaScript學習。 如果有人可以告訴我如何考慮這一點,我將不勝感激。 尋找更多信息以學習如何執行此操作,因此,由於我沒有編碼背景,因此我可以為這些論壇做出貢獻並簡化腳本功能的過程。
如果可以使用jQuery,則不需要太多代碼:
每當有人單擊復選框( $('input').on('click', function() {
)時,您都可以更新結果。
我個人會使用<label>
元素,但這就是我。 您可以通過以下方式獲取值
$('input:checked').each(function() {
values.push($(this).parent().text());
});
這是一個工作示例: http : //jsfiddle.net/HarryPehkonen/zNfju/1/
我對您的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);
}
}
這是另一種方法。
// 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/
HTML:
<input onclick="ATHD()" id="1" type="checkbox" name="pr" value="Password Reset" /> Password Reset<br /> <input onclick="ATHD()" id="2" type="checkbox" name="ps" value="Password Setup" /> 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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.