Checkbox arrays

Question

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?

Have you tried getting it working for a single section? What's your code for that? — Douglas
– Douglas, Commented Jun 17, 2015 at 8:52

fuyushimoya · Accepted Answer · 2015-06-17 08:53:16Z

1

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>

answered Jun 17, 2015 at 8:53

fuyushimoya

9,8133 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richy Over a year ago

This is absolutely perfect. Such clean code too. Love it. Thank you fuyushimoya.

Federico · Accepted Answer · 2015-06-17 09:01:16Z

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>

Collectives™ on Stack Overflow

Checkbox arrays

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related