CODEWITHSUNDEEP
javascriptarrayscheckbox
Richy
Richy

Reputation: 177

Checkbox arrays

Just wondering if anyone can help. I currently have code like this:

<section>
  <span class="tags"></span>

  <label for="shoes">Shoes</label>
  <input type="checkbox" id="shoes">

  <label for="jeans">Jeans</label>
  <input type="checkbox" id="jeans">

  <label for="tops">Tops</label>
  <input type="checkbox" id="tops">
</section>

<section>
  <span class="tags"></span>

  <label for="monkey">monkey</label>
  <input type="checkbox" id="monkey">

  <label for="lion">lion</label>
  <input type="checkbox" id="lion">

  <label for="dog">dog</label>
  <input type="checkbox" id="dog">
</section>

Each 'section' is dynamically produced. How do I go about inserting the value of each input into the span of each section when checked. I have been playing around with Arrays but stumbling due to each section being produced dynamically.

Can any of you help me out?

Upvotes: 0

Views: 77

Answers (2)

Federico
Federico

Reputation: 1251

Use this javascript:

<script type="text/javascript">
window.addEventListener("load",function(){
    var sections = document.getElementsByTagName("section");
    for(var i=0; i<sections.length; i++){
        var n = 0;
        sections[i].span = sections[i].getElementsByTagName("span")[0];
        sections[i].checkboxes = [];
        var inputs = sections[i].getElementsByTagName("input");
        for(var c=0; c<inputs.length; c++){
            if(inputs[c].type!="checkbox"){continue}
            sections[i].checkboxes[n++]=inputs[c];
            inputs[c].onchange=function(){this.parentNode.getValues();}
        }
        sections[i].getValues = function(){
            var o=[], n=0;
            for(var i=0; i<this.checkboxes.length; i++){if(this.checkboxes[i].checked){o[n++] = this.checkboxes[i].id;}}
            this.span.innerHTML = o.join(", ");
        };
    }
},false);
</script>

Upvotes: 1

fuyushimoya
fuyushimoya

Reputation: 9813

Better give each checkbox input a value, anyway, I'll use id instead.

// Listen to all checkboxes
$('section input[type="checkbox"]').click(function(e) {
    var $this = $(e.target);
    // Find the container of same group.
    var $parent = $this.parent('section');
    // Find all checked ones.
    var checked = $parent.find('input[type="checkbox"]:checked');
    // Map the value or id, to an array.
    var result = $.map(checked, function(ele) {
        return $(ele).attr('id');
    });
    // Get the result, use it whatever you want.
    $parent.find('.tags').text(result.join(' '));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <span class="tags"></span>

  <label for="shoes">Shoes</label>
  <input type="checkbox" id="shoes">

  <label for="jeans">Jeans</label>
  <input type="checkbox" id="jeans">

  <label for="tops">Tops</label>
  <input type="checkbox" id="tops">
</section>

<section>
  <span class="tags"></span>

  <label for="monkey">monkey</label>
  <input type="checkbox" id="monkey">

  <label for="lion">lion</label>
  <input type="checkbox" id="lion">

  <label for="dog">dog</label>
  <input type="checkbox" id="dog">
</section>

Upvotes: 1

Related Questions