How to obtain the checkbox label for checked and use array to display labels

StackOverflow https://stackoverflow.com/questions/23640220

Question

I'm new to JavaScript and jQuery. I'm trying to figure out how to obtain my checkbox checked labels to eventually send to the next web page. I also want to send a complete list of checked and non-checked boxes to the next web page so I thought I'd just store them in an array to start, but the array isn't working to display it.

The way this checkbox list page works is that after the user is done checking, they hit the button and the results are captured to send on.

I started a function to do this, but I'm trying to use an array with the complete list of checkbox labels to use for display and to send on later. I'm having trouble getting the array to display the label name, and I can't help but think I'm not doing this right, or that there's a better way to do it. I'm capturing the checked value (on) when I used inpfields[i].value, but I really need the checked item's label. When I used inpfields[i].label, it returned nothing. I also tried lblFields[i].label and it was empty too.

My questions are:

  1. What do you recommend I do with the array to get it to work in the checkbox label?
  2. How do I get the array of checked items for use later?

I got the idea for pressing the button for checkbox processing here. I'm trying to understand arrays here but don't have it working yet. I got the idea to use the getLabel(id) function methodology here but it's not working.

Right now, when I hit my button, I get a popup that says [object HTMLCollection] on it.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.

-->
<html>

<head>
    <title>jQuery Michele Project</title>
    <link href="css/skins/polaris/polaris.css" rel="stylesheet">
    <link href="css/skins/all.css" rel="stylesheet">
    <link href="css/demo/css/custom.css" rel="stylesheet">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script src="js/icheck.js"></script>

    <script>
        function getHeading(var i){
            var allCheckboxLabels = [Heading1, Heading2, Heading3];
            document.getElement().innerHTML = allCheckboxLabels[i];
        }

    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.input').iCheck({
                checkboxClass:'icheckbox_polaris',
                radioClass:'iradio_polaris',
                increaseArea:'10%'
            });
        });
    </script>

    <script type="text/javascript">
    // Returns an array with values of the selected (checked) checkboxes in "frm"
    function getSelectedChbox(frm) {
        // JavaScript & jQuery Course - http://coursesweb.net/javascript/
        var selchbox = [];        // array that will store the value of selected checkboxes

        // gets all the input tags in frm, and their number
        var inpfields = frm.getElementsByTagName('input');
        var lblFields = frm.getElementsByTagName('label');
        //alert(lblFields);
        var nr_inpfields = inpfields.length;

        // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
        for(var i=0; i<nr_inpfields; i++) {
            if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].value);
        }

        return selchbox;
    }
    $(function(){
        document.getElementById('btntest').onclick = function() {
            var selchb = getSelectedChbox(this.form);
            alert(selchb);
        }
    });

    //function getLabel(id){
    //    return $("#"+id).next("label").html();
    //}
    </script>

    <style type="text/css">
        ul {list-style-type: none}
        img {padding-right: 20px; float:left}
        #infolist {width:500px}
    </style>
</head>
<body>
<form>
<div class="skin skin-line">
    <div class="arrows">
      <div class="top" data-to="skin-flat"></div>
      <div class="bottom" data-to="skin-polaris"></div>
    </div>

  </div>
  <div class="skin skin-polaris">
    <div class="arrows">
      <div class="top" data-to="skin-line"></div>
      <div class="bottom" data-to="skin-futurico"></div>
    </div>
    <h3>Select Items for Column Headings</h3>
    <dl class="clear">
      <dd class="selected">
        <div class="skin-section">
          <h4>Live</h4>

          <ul class="list">
            <li>
              <input tabindex="21" type="checkbox" id="polaris-checkbox-1">
              <label for="polaris-checkbox-1">getHeading(1)</label>

            </li>
            <li>
              <input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
              <label for="polaris-checkbox-2">Checkbox 2</label>
            </li>
            <li>
              <input type="checkbox" id="polaris-checkbox-3" >
              <label for="polaris-checkbox-3">Checkbox 3</label>
            </li>
            <li>
              <input type="checkbox" id="polaris-checkbox-4" checked >
              <label for="polaris-checkbox-4">Checkbox 4</label>
            </li>

          </ul>

        </div>

        <script>
        $(document).ready(function(){
          $('.skin-polaris input').iCheck({
            checkboxClass: 'icheckbox_polaris',
            radioClass: 'iradio_polaris',
            increaseArea: '20%'
          });
        });
        </script> 

      </dd>

    </dl>

  </div>

        <div id="loading">
            <input type="button" value="Click" id="btntest" /> 
        </div>

</form>

</body>
</html>
Was it helpful?

Solution

I figured it out. I wound up using:

if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);

Thanks for the hint!

This is how I got an array of allLabels. I didn't use getheading(i) in my label anymore. I'm just using text for the labels, pulling the names into an array, and then I'll figure out how to send the array to the next web page.

        function getSelectedChbox(frm) {
            // JavaScript & jQuery Course - http://coursesweb.net/javascript/
            var selchbox = [];        // array that will store the value of selected checkboxes
            var allLabels = [];       // array to store value of all checkboxes, selected and not
            // gets all the input tags in frm, and their number
            var inpfields = frm.getElementsByTagName('input');
            var lblFields = frm.getElementsByTagName('label');
            var allLabelFields = frm.getElementsByTagName('label').innerHTML;


            var nr_inpfields = inpfields.length;

            // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
            for(var i=0; i<nr_inpfields; i++) {
                if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);

                if(inpfields[i].type == 'checkbox') allLabels.push(lblFields[i].innerHTML);

            }
            alert(allLabels);
            return selchbox;
        }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top