Get value of checkbox and display it in specific format

Question

I am trying to get the checked value in checkbox and display it in some specific format using javascript but somehow I dont know how to do it

I have tried html and javascript and I dont know ajax or jquery so I am trying javascript only

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

If checked values are dancing and painting

then output should be

Hobby:#dancing#painting

and I dont want to display it as alert box instead I want to display it on same page

Possible duplicate of [Get the value of checked checkbox?](https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) — soulshined, Feb 13 '19 at 17:03
this is not duplicate that question was using ajax and also alert box or else i wouldnt have posted the question and you can visit whole internet but none of them is clearly stating how to print the checked value in check box — Mehul Kothari, Feb 13 '19 at 17:06
They aren't using ajax, and that link answers your question. There are many answers in that link that help you actually. The code will not be same of course because its a different project, but how to get it done is the same. — soulshined, Feb 13 '19 at 17:09
Yea you people have knowledge so you can better understand but i was trying from morning so i posted the question as I am beigner and i am not expecting the same code but how to print it i was ust needing that — Mehul Kothari, Feb 13 '19 at 17:13

score 2 · Accepted Answer · answered Feb 13 '19 at 17:05

You need to concatenate the values and display them outside the loop. Something like this:

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>

Get value of checkbox and display it in specific format

1 Answers1