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

Question

我试图在复选框中获取选中的值并使用javascript以某种特定格式显示它，但不知何故我不知道如何做到这一点

我试过html和爪哇脚本，我不知道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/>

如果选中的值是舞蹈和绘画

那么输出应该是

爱好:#跳舞#绘画

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

Answer 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>