Display Value of the Checkboxes in
onclick Javascript

Question

Display the Value of the Checkbox. The message changes while the user checked or unchecked the checkbox. I have this code but it is arranged in alphabetical manner everytime i check/uncheck a box which should not be. It should be displayed in a manner on how the user selected the checkboxes.

Javascript Code:

<script>
    function callMe(x)
{   
    var changeableTags=document.getElementsByClassName(x.getAttribute("title"));
    if(x.checked == true)
    {
        for(i=0; i<changeableTags.length; i++)
        {
        changeableTags[i].style.display="initial";
        }
    }
    else{
        for(i=0; i<changeableTags.length; i++)
        {
        changeableTags[i].style.display="none";
        }
    }
}
    </script>

HTML Code:

<body>

    <input type="checkbox" title="nr_1" name="abccheck" checked onChange="callMe(this)"> A <br>
    <input type="checkbox" title="nr_2" name="abccheck" checked onChange="callMe(this)"> B <br>
    <input type="checkbox" title="nr_3" name="abccheck" checked onChange="callMe(this)"> C <br>
    <p class="nr_1" style="display:initial">A </p>
    <p class="nr_2" style="display:initial">B </p>
    <p class="nr_3" style="display:initial">C </p>
    </body>

They are rendered as "A B C" because you have `p` elements in that order. If you need the order as per user's selection, you should capture the `checked` events and store the selected elements in an array and then write them to a common `p` element. — Nisarg Shah, Nov 26 '17 at 05:02

score 0 · Answer 1 · answered Nov 26 '17 at 05:26

Hope code below help your issue.

function handleClick(cb) {
  var idCheckBox = cb.getAttribute('id');
  var changeableTags=document.getElementsByClassName(idCheckBox);
  if(cb.checked === true){
    console.log("true");
    for(i=0; i<changeableTags.length; i++)
    {
      changeableTags[i].style.display="initial";
    }
  }else{
    console.log("false");
    for(i=0; i<changeableTags.length; i++)
    {
      changeableTags[i].style.display="none";
    }
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <label><input type='checkbox' checked onclick='handleClick(this);' id='1'>Checkbox 1</label>
  </div>  
  <div>
    <label><input type='checkbox' checked onclick='handleClick(this);' id='2'>Checkbox 2</label>
  </div>
  <div>
    <label><input type='checkbox' checked onclick='handleClick(this);' id='3'>Checkbox 3</label>
  </div>
  <div>  
    <p class="1" style="display:initial">ID 1 Checked </p>
  </div>
  <div>
    <p class="2" style="display:initial">ID 2 Checked </p>
  </div>
  <div>
    <p class="3" style="display:initial">ID 3 Checked </p>
  </div>
</body>
</html>

Its still displaying in Alphabetical manner. What I need to do is if i clicked checkbox2 then checkbox1 it should display ID 2 checked, ID 1 Checked and should be in 1 line separated by a comma. — Bubbles, Nov 26 '17 at 08:26

Brian Peacock · Answer 2 · 2017-11-26T17:37:41.427

It is important to structure one's HTML markup with reference to the task at hand. Consider the following revision of your example code...

<input id="A" type="checkbox" title="nr_1" name="abccheck" checked> <br>
<input id="B" type="checkbox" title="nr_2" name="abccheck" checked> <br>
<input id="C" type="checkbox" title="nr_3" name="abccheck" checked> <br>
<div id="display-container">
    <p id="pA">A</p>
    <p id="pB">B</p>
    <p id="pC">C</p>
</div>

Each input[type=checkbox] and each corresponding P element has a unique HTML id attribute assigned. The paragraphs are placed inside a container for convenience.

The ids of clicked checkbox elements can be scrutinised by JavaScript in the following way...

First, add an event listener to each target element...

/* collect all checkboxes */
var cBoxes = document.querySelectorAll(
    "input[name=abccheck]"
};
/* loop and add an event listener
   to each element in the collection */
[].slice.call(cBoxes).forEach(function(cb) {
    cb.addEventListener(
        "click", clickMe, false
    );
});

The clickMe() function will be called whenever an input with name=abccheck is clicked. Why add and event listeners here?

To find out which element has been clicked you can poll the event's .target in the clickMe() function...

function clickMe(event) {
    var boxID = event.target.id;
    // i.e. boxID = A, B or C
}

Now, rather than showing or hiding HTML P elements the boxID variable can be used to find, insert or remove the corresponding P into the div#display-container element, like so...

function clickMe(event) {
    var boxID = event.target.id;
    var container = document.getElementById(
        "display-container"
    );

    /* look for a corresponding P-element */
    var pCheck = document.getElementById(
        "p" + boxID
    );
    /* variable to hold newly created P-element */
    var pTag;

    /* if the corresponding P-element
       exists then remove it, otherwise
       create and add it */
    if (pCheck) {
        /* remove */
        container.removeChild(pCheck);
    } else {
        /* create new P-element */
        pTag = document.createElement("p");
        /* add unique id to new P */
        pTag.id = "p" + boxID;
        /* add text to new P */
        pTag.textContent = boxID;
        /* insert into #display-container */
        container.appendChild(pTag);
     }
}

Each time a checkbox is clicked the corresponding paragraph will be removed/added from div#display-container - in the order the events occurred.

JSFIDDLE here.

See MDN for more info about...

Display Value of the Checkboxes in onclick Javascript

2 Answers2

Display Value of the Checkboxes in
onclick Javascript