Array of Checkboxes

Question

Array of Checkboxes

Seeking assistance with a coding dilemma. Here is the existing code snippet:

<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 generated dynamically. I am struggling to figure out how to insert the value of each input into the respective span within the section when checked. I have attempted using Arrays, but the dynamic nature of the sections is causing issues.

Could anyone lend me a hand with this? Your help would be greatly appreciated.

javascript arrays checkbox

Answer 1

Answer №1

It's a good idea to assign each checkbox input a value, but in this case, I'll use id instead.

// To track all checkboxes
$('section input[type="checkbox"]').click(function(e) {
    var $this = $(e.target);
    // Locate the parent container.
    var $parent = $this.parent('section');
    // Find all checked checkboxes.
    var checked = $parent.find('input[type="checkbox"]:checked');
    // Store values or ids in an array.
    var result = $.map(checked, function(ele) {
        return $(ele).attr('id');
    });
    // Display the result as needed.
    $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>

Answer 2

It's a good idea to assign each checkbox input a value, but in this case, I'll use id instead.

// To track all checkboxes
$('section input[type="checkbox"]').click(function(e) {
    var $this = $(e.target);
    // Locate the parent container.
    var $parent = $this.parent('section');
    // Find all checked checkboxes.
    var checked = $parent.find('input[type="checkbox"]:checked');
    // Store values or ids in an array.
    var result = $.map(checked, function(ele) {
        return $(ele).attr('id');
    });
    // Display the result as needed.
    $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>

Answer 3

Answer №2

Here is a sample JavaScript code snippet:

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

Answer 4

Here is a sample JavaScript code snippet:

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

Array of Checkboxes

Answer №1

Answer №2

Similar questions

Is it possible for me to access a portion of a variable?

Nested JSON data within an array using Httpful

Issue when sending PHP Papa Parse object through AJAX

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

npm replace: troubleshooting npm script for replacing text across numerous files

Tips for addressing dependency issues in react native applications

Javascript does not have the capability to parse JSON

The dynamic data graph generated by HIGHCHARTS Areaspline is not as effective as expected

Ways to dynamically update the class name of pre-existing elements in React.js

MUI options - The specified type 'string' cannot be matched with type '"icon" | "iconOnly" | "text" | "outlined" | "contained" | undefined'

The PHP script is not being activated by AJAX

Strategies for organizing and handling npm packages within my codebase

Express routes are malfunctioning

Is it possible to read an XML response as a stream using Ext JS?

What is the process for removing a row from the database in this scenario?

Incorporate the use of OpenLayers into a Vue.js application

What is the significance of curly braces within function parameter declarations in JavaScript?

Import data from a file into a JavaScript 2D array

Leveraging React useEffect for retrieving data and managing component behavior

Having trouble with jQuery toggle fade: Unable to make the div fade in/out when toggling