我需要使用Javascript将复选框中的值打印到HTML页面
当按下提交按钮时，我需要将复选框值打印到页面上。正如我现在看到的，它只会从复选框中打印一个值，无论选中了多少。复选框是区域 我不知道从这里到哪里去，所以非常感谢您的帮助，谢谢我需要使用Javascript将复选框中的值打印到HTML页面,javascript,html,forms,checkbox,Javascript,Html,Forms,Checkbox,当按下提交按钮时，我需要将复选框值打印到页面上。正如我现在看到的，它只会从复选框中打印一个值，无论选中了多少。复选框是区域 我不知道从这里到哪里去，所以非常感谢您的帮助，谢谢 <script type="text/javascript"> function checkform () { info = document.getElementById("personalInfo"); info.innerHTML = "<strong>Peronal Info: &l
<script type="text/javascript">
function checkform () {
info = document.getElementById("personalInfo");
info.innerHTML = "<strong>Peronal Info: </strong>" + "<br>" + "Name: " +
document.feedback.fname.value +
" " +
document.feedback.lname.value +
"<br>" + "Email: " +
document.feedback.email.value;
info = document.getElementById("experienceSubmit");
var compensationValue,regionValue;
//Get compensation value
for(var i=0;i<document.feedback.comp.length;i++){
if(document.feedback.comp[i].checked){
compensationValue = document.feedback.comp[i].value;
}
}
//Get region value
for(var i=0;i<document.feedback.region.length;i++){
if(document.feedback.region[i].checked){
regionValue = document.feedback.region[i].value;
}
}
info = document.getElementById("otherSubmit");
info.innerHTML = "<strong>Other information: </strong>" + "<br>" + "# of References " +
document.feedback.reference.value +
"<br>" + "Additional Comments: " +
document.feedback.comments.value;
return false;
}
</script>
</head>
<body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" >
<form name="feedback" method="post" onSubmit="return checkform()">
<section id="pinfo" class="inputArea">
<fieldset>
<table>
<tr>
<td>Last Name: </td>
<td><input name="lname"
type="text"
autofocus
required
placeholder="lname"
size="25" />
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input name="fname"
type="text"
size="25"
required
placeholder="fname" />
</td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email"
type="email"
size="40"
required
placeholder="....@hotmail.com" />
</td>
</tr>
<td>Gender: </td>
<td><select name="gender">
<option selected disabled style='display:none;'>
Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</fieldset>
</section>
<section id="experience">
<fieldset>
<table>
<tr>
<td>
<label for="experience">Years of Experience: </label>
<input name="experience" type="number" />
</td>
</tr>
<tr>
<td>
<label for="date">Date</label>
<input name="date" type="date" />
</td>
<tr>
<td>
<label for="comp">Compensation: </label><br>
<input name="comp" type="radio" id="Salary" value="Salary Selected">Salary
<input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus
<input name="comp" type="radio" id="Commission" value="Commission Selected">Commission
</td>
</tr>
<tr>
<td>
<label for="region">Region: </label><br>
<input name="region" type="checkbox" id="East" value="East Selected">East
<input name="region" type="checkbox" id="West" value="West Selected">West
<input name="region" type="checkbox" id="North" value="North Selected">North
<input name="region" type="checkbox" id="South" value="South Selected">South
</td>
</tr>
</table>
</fieldset>
</section>
<section id="other">
<fieldset>
<table>
<tr>
<td>
<label for="reference">References<br>0   1   2    3    4    5<br></label>
<input name="reference" id="reference"
type="range"
value="0"
min="0"
max="5"
step="1" />
</td>
</tr>
<tr>
<td>
<label for="comments">Additional Comments: <br></label>
<textarea
name="comments"
rows="5"
cols="20"
placeholder="Please include any other pertinent information here"></textarea> </td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</section>
</form>
<section id="personalInfo"></section>
<section id="experienceSubmit"></section>
<section id="otherSubmit"></section>
</body>
函数检查表（）{
info=document.getElementById（“personalInfo”）；
info.innerHTML=“个人信息：“+”
“+”姓名：“+
document.feedback.fname.value+
" " +
document.feedback.lname.value+
“
”+“电子邮件：”+
文件、反馈、电子邮件、价值；
info=document.getElementById（“experienceSubmit”）；
无功补偿值，区域值；
//获得补偿值
对于（var i=0；i要执行此操作，您需要抓取所有复选框，并将其内容添加到表单/div/中您希望放置它们的任何位置。在表单提交函数中，您可以添加：
var myform = document.getElementById('myform'), //Your form
inputs = myform.getElementsByTagName('input'), //The inputs in the form
regionsContainer = document.getElementById('regions'), //The place to put the regions
regions = [], //Temporary array to store our values
i, l;
//Loop through the inputs
for(i = 0, l = inputs.length; i < l; i++) {
//Make sure it is a checkbox, it's name is region, and it is checked
if(inputs[i].type === 'checkbox' && inputs[i].name === 'region' && inputs[i].checked) {
//Add the value
regions.push(inputs[i].value);
}
}
//Display our regions
regionsContainer.innerHTML = regions.join(',');
var myform=document.getElementById（'myform'），//您的表单
inputs=myform.getElementsByTagName（'input'），//表单中的输入
regionsContainer=document.getElementById（'regions'），//放置区域的位置
regions=[]，//用于存储值的临时数组
i、 l；
//循环输入
对于（i=0，l=inputs.length；i
这对我很有效，谢谢大家
var compensationValue,eastValue, westValue, northValue, southValue;
//Get compensation value
for(var i=0;i<document.feedback.comp.length;i++){
if(document.feedback.comp[i].checked){
compensationValue = document.feedback.comp[i].value;
}
}
//Get region value
eastValue=""; westValue=""; northValue=""; southValue="";
if (document.feedback.east.checked) {
eastValue = document.feedback.east.value;
}
if (document.feedback.west.checked) {
westValue = document.feedback.west.value;
}
if (document.feedback.north.checked) {
northValue = document.feedback.north.value;
}
if (document.feedback.south.checked) {
southValue = document.feedback.south.value;
}
var补偿值、eastValue、westValue、northValue、southValue；
//获得补偿值
对于（var i=0；i您没有显示整个函数..您还没有显示整个函数，如果您希望选择其中一个，为什么不使用单选按钮而不是复选框？我希望选择用户想要的数量。那么为什么只显示一个？如果您不想选一个，那就没有意义了@kyle的答案是最好的ise我建议您使用具有相同名称的单选按钮，该按钮将返回单个值。这将显示最后一个选中的框，并在该框之前显示“未定义”。抱歉，我忽略了您没有初始化regionValue。请将regionValue=”“放在循环前面。
var myform = document.getElementById('myform'), //Your form
inputs = myform.getElementsByTagName('input'), //The inputs in the form
regionsContainer = document.getElementById('regions'), //The place to put the regions
regions = [], //Temporary array to store our values
i, l;
//Loop through the inputs
for(i = 0, l = inputs.length; i < l; i++) {
//Make sure it is a checkbox, it's name is region, and it is checked
if(inputs[i].type === 'checkbox' && inputs[i].name === 'region' && inputs[i].checked) {
//Add the value
regions.push(inputs[i].value);
}
}
//Display our regions
regionsContainer.innerHTML = regions.join(',');
var compensationValue,eastValue, westValue, northValue, southValue;
//Get compensation value
for(var i=0;i<document.feedback.comp.length;i++){
if(document.feedback.comp[i].checked){
compensationValue = document.feedback.comp[i].value;
}
}
//Get region value
eastValue=""; westValue=""; northValue=""; southValue="";
if (document.feedback.east.checked) {
eastValue = document.feedback.east.value;
}
if (document.feedback.west.checked) {
westValue = document.feedback.west.value;
}
if (document.feedback.north.checked) {
northValue = document.feedback.north.value;
}
if (document.feedback.south.checked) {
southValue = document.feedback.south.value;
}