List Items individually with labels

Good Afternoon,

Im looking to create a small currently selected options element for a website, im fairly new when it comes to anything JS related. How could I adjust the code below to list the selected items individually between their own <label> tags?

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;

    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

asked Nov 24 '18 at 13:18

springboynick

How could I adjust the code below to list the selected items individually between their own tags....needs more clarification....

– Mamun
Nov 24 '18 at 13:23

Sorry that was a little vaguwe :) So whereas at the moment the selected items are listing in one INPUT box, id like them individually listed between their own 'div' tags

– springboynick
Nov 24 '18 at 13:27

Div or label tags? I updated your question to show the invisible label tag

– mplungjan
Nov 24 '18 at 15:19

add a comment |

Good Afternoon,

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;

    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

asked Nov 24 '18 at 13:18

springboynick

How could I adjust the code below to list the selected items individually between their own tags....needs more clarification....

– Mamun
Nov 24 '18 at 13:23

Sorry that was a little vaguwe :) So whereas at the moment the selected items are listing in one INPUT box, id like them individually listed between their own 'div' tags

– springboynick
Nov 24 '18 at 13:27

Div or label tags? I updated your question to show the invisible label tag

– mplungjan
Nov 24 '18 at 15:19

add a comment |

Good Afternoon,

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;

    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

asked Nov 24 '18 at 13:18

springboynick

Good Afternoon,

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;

    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;

    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;

    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

javascript forms checkbox

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

asked Nov 24 '18 at 13:18

springboynick

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

asked Nov 24 '18 at 13:18

springboynick

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

edited Nov 24 '18 at 15:19

mplungjan

88.7k22126182

asked Nov 24 '18 at 13:18

springboynick

asked Nov 24 '18 at 13:18

springboynick

asked Nov 24 '18 at 13:18

springboynick

How could I adjust the code below to list the selected items individually between their own tags....needs more clarification....

– Mamun
Nov 24 '18 at 13:23

Sorry that was a little vaguwe :) So whereas at the moment the selected items are listing in one INPUT box, id like them individually listed between their own 'div' tags

– springboynick
Nov 24 '18 at 13:27

Div or label tags? I updated your question to show the invisible label tag

– mplungjan
Nov 24 '18 at 15:19

add a comment |

How could I adjust the code below to list the selected items individually between their own tags....needs more clarification....

– Mamun
Nov 24 '18 at 13:23

Sorry that was a little vaguwe :) So whereas at the moment the selected items are listing in one INPUT box, id like them individually listed between their own 'div' tags

– springboynick
Nov 24 '18 at 13:27

Div or label tags? I updated your question to show the invisible label tag

– mplungjan
Nov 24 '18 at 15:19

How could I adjust the code below to list the selected items individually between their own tags....needs more clarification....

– Mamun
Nov 24 '18 at 13:23

Sorry that was a little vaguwe :) So whereas at the moment the selected items are listing in one INPUT box, id like them individually listed between their own 'div' tags

– springboynick
Nov 24 '18 at 13:27

Div or label tags? I updated your question to show the invisible label tag

– mplungjan
Nov 24 '18 at 15:19

add a comment |

3 Answers
3

active

oldest

votes

I have included below a simple solution.

      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html

Things like this can be very elegantly handled by a modern tool like vue.js, so if you plan to do anything more complicated I would very much recommend investigating that.

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

edited Nov 24 '18 at 13:52

answered Nov 24 '18 at 13:29

Cecil

22625

You are listing the index, not the value

– mplungjan
Nov 24 '18 at 13:34

Thats excellent. THank you for the swift answer and the heads up on vue.js, I will have a look at it. :)

– springboynick
Nov 24 '18 at 13:35

1

Also it is not recommended to use for..in when accessing arrays

– mplungjan
Nov 24 '18 at 13:37

Oh yes sorry it is outputting index, can this be adjusted for the Value :)

– springboynick
Nov 24 '18 at 13:46

It's not actually wrapping in divs - also this code is not compatible with IE unless you use Babel

– mplungjan
Nov 24 '18 at 15:02

add a comment |

A simple way to do that would be:

first add some tag in the label.

add the value on new tag when checkbok is checked.

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:43

samuel silva

2915

This is not actually answering the question

– mplungjan
Nov 24 '18 at 15:01

so probably I understand wrong.. I'm sorry

– samuel silva
Nov 24 '18 at 15:12

See my answer for the solution as far as I understand it. list the selected items individually between their own <label> tags?

– mplungjan
Nov 24 '18 at 15:17

add a comment |

Do you mean something like this?

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

edited Nov 24 '18 at 15:19

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458540%2flist-items-individually-with-labels%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

I have included below a simple solution.

      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html

Things like this can be very elegantly handled by a modern tool like vue.js, so if you plan to do anything more complicated I would very much recommend investigating that.

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

edited Nov 24 '18 at 13:52

answered Nov 24 '18 at 13:29

Cecil

22625

You are listing the index, not the value

– mplungjan
Nov 24 '18 at 13:34

Thats excellent. THank you for the swift answer and the heads up on vue.js, I will have a look at it. :)

– springboynick
Nov 24 '18 at 13:35

1

Also it is not recommended to use for..in when accessing arrays

– mplungjan
Nov 24 '18 at 13:37

Oh yes sorry it is outputting index, can this be adjusted for the Value :)

– springboynick
Nov 24 '18 at 13:46

It's not actually wrapping in divs - also this code is not compatible with IE unless you use Babel

– mplungjan
Nov 24 '18 at 15:02

add a comment |

I have included below a simple solution.

      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html

Things like this can be very elegantly handled by a modern tool like vue.js, so if you plan to do anything more complicated I would very much recommend investigating that.

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

edited Nov 24 '18 at 13:52

answered Nov 24 '18 at 13:29

Cecil

22625

You are listing the index, not the value

– mplungjan
Nov 24 '18 at 13:34

Thats excellent. THank you for the swift answer and the heads up on vue.js, I will have a look at it. :)

– springboynick
Nov 24 '18 at 13:35

1

Also it is not recommended to use for..in when accessing arrays

– mplungjan
Nov 24 '18 at 13:37

Oh yes sorry it is outputting index, can this be adjusted for the Value :)

– springboynick
Nov 24 '18 at 13:46

It's not actually wrapping in divs - also this code is not compatible with IE unless you use Babel

– mplungjan
Nov 24 '18 at 15:02

add a comment |

I have included below a simple solution.

      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html

Things like this can be very elegantly handled by a modern tool like vue.js, so if you plan to do anything more complicated I would very much recommend investigating that.

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

edited Nov 24 '18 at 13:52

answered Nov 24 '18 at 13:29

Cecil

22625

I have included below a simple solution.

      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html

Things like this can be very elegantly handled by a modern tool like vue.js, so if you plan to do anything more complicated I would very much recommend investigating that.

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

function checkCount(elm) {

      var checkboxes = document.getElementsByClassName("checkbox-btn");

      var selected = ;

      for (var i = 0; i < checkboxes.length; ++i) {

        if(checkboxes[i].checked){

            selected.push(checkboxes[i].value);

        }

        }

      document.getElementById("proId").value = selected.join();

      document.getElementById("total").innerHTML = selected.length;



      const listEl = document.getElementById('selected-value-list')

      let html = ''

      selected.forEach(item => {

        html += `<li>${item}</li>`

      })

      listEl.innerHTML = html





    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='asdasd' onchange='checkCount();'></label>

    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='bbbbb' onchange='checkCount();'></label>



    <input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div>Selected Values:</div>

<ul id="selected-value-list">

 

</ul>

edited Nov 24 '18 at 13:52

answered Nov 24 '18 at 13:29

Cecil

22625

edited Nov 24 '18 at 13:52

answered Nov 24 '18 at 13:29

Cecil

22625

answered Nov 24 '18 at 13:29

Cecil

22625

answered Nov 24 '18 at 13:29

Cecil

22625

You are listing the index, not the value

– mplungjan
Nov 24 '18 at 13:34

Thats excellent. THank you for the swift answer and the heads up on vue.js, I will have a look at it. :)

– springboynick
Nov 24 '18 at 13:35

1

Also it is not recommended to use for..in when accessing arrays

– mplungjan
Nov 24 '18 at 13:37

Oh yes sorry it is outputting index, can this be adjusted for the Value :)

– springboynick
Nov 24 '18 at 13:46

It's not actually wrapping in divs - also this code is not compatible with IE unless you use Babel

– mplungjan
Nov 24 '18 at 15:02

add a comment |

You are listing the index, not the value

– mplungjan
Nov 24 '18 at 13:34

Thats excellent. THank you for the swift answer and the heads up on vue.js, I will have a look at it. :)

– springboynick
Nov 24 '18 at 13:35

1

Also it is not recommended to use for..in when accessing arrays

– mplungjan
Nov 24 '18 at 13:37

Oh yes sorry it is outputting index, can this be adjusted for the Value :)

– springboynick
Nov 24 '18 at 13:46

It's not actually wrapping in divs - also this code is not compatible with IE unless you use Babel

– mplungjan
Nov 24 '18 at 15:02

You are listing the index, not the value

– mplungjan
Nov 24 '18 at 13:34

Thats excellent. THank you for the swift answer and the heads up on vue.js, I will have a look at it. :)

– springboynick
Nov 24 '18 at 13:35

Also it is not recommended to use for..in when accessing arrays

– mplungjan
Nov 24 '18 at 13:37

Oh yes sorry it is outputting index, can this be adjusted for the Value :)

– springboynick
Nov 24 '18 at 13:46

It's not actually wrapping in divs - also this code is not compatible with IE unless you use Babel

– mplungjan
Nov 24 '18 at 15:02

add a comment |

A simple way to do that would be:

first add some tag in the label.

add the value on new tag when checkbok is checked.

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:43

samuel silva

2915

This is not actually answering the question

– mplungjan
Nov 24 '18 at 15:01

so probably I understand wrong.. I'm sorry

– samuel silva
Nov 24 '18 at 15:12

See my answer for the solution as far as I understand it. list the selected items individually between their own <label> tags?

– mplungjan
Nov 24 '18 at 15:17

add a comment |

A simple way to do that would be:

first add some tag in the label.

add the value on new tag when checkbok is checked.

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:43

samuel silva

2915

This is not actually answering the question

– mplungjan
Nov 24 '18 at 15:01

so probably I understand wrong.. I'm sorry

– samuel silva
Nov 24 '18 at 15:12

See my answer for the solution as far as I understand it. list the selected items individually between their own <label> tags?

– mplungjan
Nov 24 '18 at 15:17

add a comment |

A simple way to do that would be:

first add some tag in the label.

add the value on new tag when checkbok is checked.

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:43

samuel silva

2915

A simple way to do that would be:

first add some tag in the label.

add the value on new tag when checkbok is checked.

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;





  if (elm.checked) {

    elm.nextElementSibling.innerText = elm.value;

  } else {

    elm.nextElementSibling.innerText = '';

  }



  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }





  document.getElementById("proId").value = selected.join();

  document.getElementById("total").innerHTML = selected.length;

}

<label class='checkbox-inline'>

    <input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this);'>

    <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this);'>

      <span></span>

    </label>



<label class='checkbox-inline'>

      <input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this);'>

      <span></span>

    </label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:43

samuel silva

2915

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

edited Nov 24 '18 at 15:01

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:43

samuel silva

2915

answered Nov 24 '18 at 13:43

samuel silva

2915

answered Nov 24 '18 at 13:43

samuel silva

2915

This is not actually answering the question

– mplungjan
Nov 24 '18 at 15:01

so probably I understand wrong.. I'm sorry

– samuel silva
Nov 24 '18 at 15:12

See my answer for the solution as far as I understand it. list the selected items individually between their own <label> tags?

– mplungjan
Nov 24 '18 at 15:17

add a comment |

This is not actually answering the question

– mplungjan
Nov 24 '18 at 15:01

so probably I understand wrong.. I'm sorry

– samuel silva
Nov 24 '18 at 15:12

See my answer for the solution as far as I understand it. list the selected items individually between their own <label> tags?

– mplungjan
Nov 24 '18 at 15:17

This is not actually answering the question

– mplungjan
Nov 24 '18 at 15:01

so probably I understand wrong.. I'm sorry

– samuel silva
Nov 24 '18 at 15:12

See my answer for the solution as far as I understand it. list the selected items individually between their own <label> tags?

– mplungjan
Nov 24 '18 at 15:17

add a comment |

Do you mean something like this?

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

edited Nov 24 '18 at 15:19

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

add a comment |

Do you mean something like this?

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

edited Nov 24 '18 at 15:19

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

add a comment |

Do you mean something like this?

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

edited Nov 24 '18 at 15:19

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

Do you mean something like this?

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

function checkCount(elm) {

  var checkboxes = document.getElementsByClassName("checkbox-btn");

  var selected = ;

  for (var i = 0; i < checkboxes.length; ++i) {

    if (checkboxes[i].checked) {

      selected.push(checkboxes[i].value);

    }

  }

  document.getElementById("proId").value = selected.join();

  if (selected.length > 0) {

    document.getElementById("tags").innerHTML = '<label>' +

      (selected.length > 1 ? selected.join('</label><label>') : selected[0]) + '</label>';

  }

  document.getElementById("total").innerHTML=selected.length;

}

#tags>label{ margin:2px; padding:3px; border: 1px solid black; }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label>

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label>



<input type="text" name="proId" id="proId">



<div>Total Selected : <span id="total">0</span></div>

<div id="tags"></div>

edited Nov 24 '18 at 15:19

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

edited Nov 24 '18 at 15:19

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

answered Nov 24 '18 at 13:32

mplungjan

88.7k22126182

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg