获取复选框的值并以特定格式显示答案

【问题标题】：Get value of checkbox and display it in specific format获取复选框的值并以特定格式显示
【发布时间】：2019-07-07 14:30:56
【问题描述】：

我正在尝试在复选框中获取选中的值并使用 javascript 以某种特定格式显示它，但不知何故我不知道该怎么做

我尝试过 html 和 javascript，但我不知道 ajax 或 jquery，所以我只尝试 javascript

function Hobby()
{

          var checkedValue = null; 
          var inputElements = document.getElementsByClass('messageCheckbox');
          for(var i=0; inputElements[i]; ++i){
            if(inputElements[i].checked){
                checkedValue = inputElements[i].value
                 document.getElementById("hobbies_value").innerHTML = inputElements;

                      break;
             }
           }         

}

 Hobby   <input class="messageCheckbox" type="checkbox" name="painting" id="painting" value="painting">Painting
<input class="messageCheckbox" type="checkbox" name="dancing" id="dancing" value="dancing">Dancing
  <input class="messageCheckbox" type="checkbox" name="sports " id="sports " value="sports ">Sports  
  <input type="button" value="student_submit" onclick="Hobby()"><br/>

如果选中的值为跳舞和绘画

那么输出应该是

爱好：#dancing#painting

我不想将它显示为警告框，而是想在同一页面上显示它

【问题讨论】：

你有一个错字。应该是getElementsByClassName
还是不行，我想要的格式呢
Get the value of checked checkbox?的可能重复
这不是重复的问题是使用 ajax 和警告框，否则我不会发布问题，您可以访问整个互联网，但没有一个明确说明如何打印检查的检查值盒子
他们没有使用 ajax，该链接回答了您的问题。该链接中有许多答案实际上可以帮助您。代码当然不会相同，因为它是一个不同的项目，但如何完成它是相同的。

标签： javascript html css

【解决方案1】：

您需要连接这些值并将它们显示在循环之外。像这样的：

function Hobby()
{

      var checkedValue = ""; 
      var inputElements = document.getElementsByClassName('messageCheckbox');
      for(var i=0; inputElements[i]; ++i){
          if(inputElements[i].checked){
              checkedValue += "#"+inputElements[i].value
                 
           }
      }         
      document.getElementById("hobbies_value").innerHTML = checkedValue;

}

Hobby   <input class="messageCheckbox" type="checkbox" name="painting" id="painting" value="painting">Painting
<input class="messageCheckbox" type="checkbox" name="dancing" id="dancing" value="dancing">Dancing
  <input class="messageCheckbox" type="checkbox" name="sports " id="sports " value="sports ">Sports  
  <input type="button" value="student_submit" onclick="Hobby()"><br/>
Javascript code is
<div id="hobbies_value"></div>

【讨论】：