我需要使用 Javascript 将复选框中的值打印到 HTML 页面答案

【问题标题】：I need to print the values from a checkbox to the page in HTML using Javascript我需要使用 Javascript 将复选框中的值打印到 HTML 页面
【发布时间】：2013-12-07 02:47:16
【问题描述】：

按下提交按钮时，我需要将复选框值打印到页面上。正如我现在拥有的那样，无论选中多少个，它都只会从复选框中打印一个值。复选框是区域。

我不知道从哪里开始，所以任何帮助表示感谢，谢谢。

<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 &nbsp;
                        <input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus &nbsp;
                        <input name="comp" type="radio" id="Commission" value="Commission Selected">Commission &nbsp;
                    </td>
              </tr>
              <tr>
                <td>
                    <label for="region">Region: </label><br>
                    <input name="region" type="checkbox" id="East" value="East Selected">East &nbsp;
                    <input name="region" type="checkbox" id="West" value="West Selected">West &nbsp;
                    <input name="region" type="checkbox" id="North" value="North Selected">North &nbsp;
                    <input name="region" type="checkbox" id="South" value="South Selected">South &nbsp;
                </td>
              </tr>
          </table>
          </fieldset>
</section>
<section id="other">
<fieldset>
          <table>
            <tr>
                <td>
                <label for="reference">References<br>0&nbsp;&nbsp 1 &nbsp;&nbsp 2 &nbsp&nbsp 3 &nbsp&nbsp 4 &nbsp&nbsp 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>

【问题讨论】：

你没有显示完整的功能..
您还没有显示整个功能，而且如果您想选择其中一个，为什么不使用单选按钮而不是复选框？
我想要尽可能多的用户想要选择。
那为什么只显示一个呢？如果您不想要@kyle 的答案是最好的，那没有任何意义，否则我建议您使用具有相同名称的单选按钮，这将返回一个值。

标签： javascript html forms checkbox

【解决方案1】：

for(var i=0;i<document.feedback.region.length;i++){
    if(document.feedback.region[i].checked){
    regionValue = document.feedback.region[i].value;        
}

错了。每次找到选中的复选框时都设置 regionValue，而不是附加到它。试试

    if (regionValue == '') {
        regionValue = document.feedback.region[i].value
    } else {
        regionValue = regionValue+','+document.feedback.region[i].value
    }

【讨论】：

这给了我最后一个选中的框，并在此之前显示未定义。
对不起，我忽略了你没有初始化 regionValue。将 regionValue="" 放在循环前面。

【解决方案2】：

为此，您需要抓取所有复选框并将其内容添加到表单/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(',');

【讨论】：

【解决方案3】：

这对我有用，谢谢大家。

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

【讨论】：