# Checkbox = checked send payload to a variable

**URL:** <https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045>\
**Category:** Dashboard\
**Created:** [28 July 2021 20:02 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045 "2021-07-28T20:02:56Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [28 July 2021 20:02 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/1 "2021-07-28T20:02:56Z")

</div>

Hello, on a table i have a checkbox, the idea is to use that checkbox to select the product that you want. Then press a buttom and of the items that has the checkbox checked i need the id number, to be sended to other function.

```
<td class="fondotabla" style="text-align:center;">{{msg.payload[$index].Marca}}</td>
<td class="fondotabla" style="text-align:center;">{{msg.payload[$index].Vencimiento}}</td> 
<td class="fondotabla" style="text-align:center;">{{msg.payload[$index].Modelo}}</td>
<td class="fondotabla" style="text-align:center;">{{msg.payload[$index].id}}</td>
<td class="fondotabla" style="text-align:center;"><input type="checkbox"/></td>

```

| Marca | Vencimiento | Modelo | Id | ✔ |
| --- | --- | --- | --- | --- |
|
| |

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [28 July 2021 23:23 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/2 "2021-07-28T23:23:36Z")

</div>

And whats the problem ? Show us your flow with some debug messages

Craig

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [28 July 2021 23:39 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/3 "2021-07-28T23:39:52Z")

</div>

Hellow, the problem is that i don’t have any response, the debug shows nothing.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [29 July 2021 01:43 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/4 "2021-07-29T01:43:12Z")

</div>

Well post up your flow so we can see how you are putting this together and then we can help

Craig

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [29 July 2021 12:22 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/6 "2021-07-29T12:22:46Z")

</div>

```auto
<div class="main">
   
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#D0D0D0" id="Table1" style="width:100%">
  <tr class="fondotitulo">
    <th>Marca</th> 
    <th>Vencimiento</th> 
    <th>Modelo</th> 
    <th>Id</th>
    <th>✔</th>
  
  </tr>
  <tr ng-repeat="x in msg.payload | limitTo:100">
      
    <td class="fondotabla" style="text-align:center;">{{msg.payload[$index].Marca}}</td>
    <td class="fondotabla" style="text-align:center;">{{msg.payload[$index].Vencimiento}}</td> 
    <td class="fondotabla" style="text-align:center;">{{msg.payload[$index].Modelo}}</td>
    <td class="fondotabla" style="text-align:center;">{{msg.payload[$index].id}}</td>
    <td class="fondotabla" style="text-align:center;"><input type="checkbox"/></td>
    
  </tr>
</table>

</div>

<input type="button" value="Get Selected" onclick="check()" />
   
</md-button>
</div>

<script type="text/javascript">
    function check() {
        //Reference the Table.
        var grid = document.getElementById("Table1");
 
        //Reference the CheckBoxes in Table.
        var checkBoxes = grid.getElementsByTagName("INPUT");
        
 
        //Loop through the CheckBoxes.
        for (var i = 0; i < checkBoxes.length; i++) {
            if (checkBoxes[i].checked) {
                var row = checkBoxes[i].parentNode.parentNode;
                
                
                var id = row.cells[3].innerHTML;
                
            }
        }
 
  
    }
</script>

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [29 July 2021 14:57 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/7 "2021-07-29T14:57:07Z")

</div>

Hello Lucas ..

```auto
<div class="main">

    <table border="1" cellpadding="0" cellspacing="0" bordercolor="#D0D0D0" id="Table1" style="width:100%">
        <tr class="fondotitulo">
            <th>Marca</th>
            <th>Vencimiento</th>
            <th>Modelo</th>
            <th>Id</th>
            <th>✔</th>

        </tr>
        <tr ng-repeat="x in msg.payload | limitTo:100">

            <td class="fondotabla" style="text-align:center;">{{x.Marca}}</td>
            <td class="fondotabla" style="text-align:center;">{{x.Vencimiento}}</td>
            <td class="fondotabla" style="text-align:center;">{{x.Modelo}}</td>
            <td class="fondotabla" style="text-align:center;">{{x.id}}</td>
            <td class="fondotabla" style="text-align:center;">
                <input data-id="{{x.id}}" data-marca="{{x.Marca}}" data-vencimiento="{{x.Vencimiento}}" data-modelo="{{x.Modelo}}" type="checkbox"/>
            </td>
        </tr>
    </table>

</div>

<input type="button" value="Get Selected" style="margin-top:10px;" onclick="check()" />

</md-button>
</div>

<script type="text/javascript">

//Declare once to make scope available in functions
var theScope = scope;

    function check() {
        //Reference the Table.
        var grid = document.getElementById("Table1");
 
        //Reference the CheckBoxes in Table.
        var checkBoxes = grid.getElementsByTagName("INPUT");
        //console.log(checkBoxes)
 
        let selected = []
        //Loop through the CheckBoxes.
        for (var i = 0; i < checkBoxes.length; i++) {
            if (checkBoxes[i].checked) {
                var id = checkBoxes[i].dataset.id;
                var marca = checkBoxes[i].dataset.marca;
                var vencimiento = checkBoxes[i].dataset.vencimiento;
                var modelo = checkBoxes[i].dataset.modelo;
                
                selected.push( {id, marca, vencimiento, modelo})
            }
        }

 //console.log(selected)
theScope.send({payload:selected}) // send back to NR

   
 }
   
</script>

```

**Test Flow :**

```auto
[{"id":"7e1bacaca148f617","type":"inject","z":"4895ea10b4ee9ead","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Marca\":\"Marca1\",\"Vencimiento\":\"Vencimiento1\",\"Modelo\":\"Modelo1\",\"id\":1},{\"Marca\":\"Marca2\",\"Vencimiento\":\"Vencimiento2\",\"Modelo\":\"Modelo2\",\"id\":2},{\"Marca\":\"Marca3\",\"Vencimiento\":\"Vencimiento3\",\"Modelo\":\"Modelo3\",\"id\":3},{\"Marca\":\"Marca4\",\"Vencimiento\":\"Vencimiento4\",\"Modelo\":\"Modelo4\",\"id\":4},{\"Marca\":\"Marca5\",\"Vencimiento\":\"Vencimiento5\",\"Modelo\":\"Modelo5\",\"id\":5}]","payloadType":"json","x":390,"y":920,"wires":[["7b27e8162f964804"]]},{"id":"7b27e8162f964804","type":"ui_template","z":"4895ea10b4ee9ead","group":"be1716dc44c27277","name":"","order":0,"width":"12","height":"14","format":"<div class=\"main\">\n\n <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#D0D0D0\" id=\"Table1\" style=\"width:100%\">\n <tr class=\"fondotitulo\">\n <th>Marca</th>\n <th>Vencimiento</th>\n <th>Modelo</th>\n <th>Id</th>\n <th>✔</th>\n\n </tr>\n <tr ng-repeat=\"x in msg.payload | limitTo:100\">\n\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.Marca}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.Vencimiento}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.Modelo}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.id}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">\n <input data-id=\"{{x.id}}\" data-marca=\"{{x.Marca}}\" data-vencimiento=\"{{x.Vencimiento}}\" data-modelo=\"{{x.Modelo}}\" type=\"checkbox\"/>\n </td>\n </tr>\n </table>\n\n</div>\n\n\n<input type=\"button\" value=\"Get Selected\" style=\"margin-top:10px;\" onclick=\"check()\" />\n\n</md-button>\n</div>\n\n\n<script type=\"text/javascript\">\n\n//Declare once to make scope available in functions\nvar theScope = scope;\n\n\n function check() {\n //Reference the Table.\n var grid = document.getElementById(\"Table1\");\n \n //Reference the CheckBoxes in Table.\n var checkBoxes = grid.getElementsByTagName(\"INPUT\");\n //console.log(checkBoxes)\n \n\n let selected = []\n //Loop through the CheckBoxes.\n for (var i = 0; i < checkBoxes.length; i++) {\n if (checkBoxes[i].checked) {\n var id = checkBoxes[i].dataset.id;\n var marca = checkBoxes[i].dataset.marca;\n var vencimiento = checkBoxes[i].dataset.vencimiento;\n var modelo = checkBoxes[i].dataset.modelo;\n \n selected.push( {id, marca, vencimiento, modelo})\n }\n }\n\n //console.log(selected)\ntheScope.send({payload:selected}) // send back top NR\n\n \n }\n \n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":560,"y":920,"wires":[["f031ce5e80e92150"]]},{"id":"f031ce5e80e92150","type":"debug","z":"4895ea10b4ee9ead","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":800,"y":920,"wires":[]},{"id":"be1716dc44c27277","type":"ui_group","name":"Default","tab":"4d0a4c2538b36c79","order":1,"disp":true,"width":"12","collapse":false},{"id":"4d0a4c2538b36c79","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

most probably it would have worked with parentNode also but i had a go with the use of [datasets](https://www.youtube.com/watch?v=Pt8RyyUWCtM)

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [29 July 2021 16:26 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/8 "2021-07-29T16:26:23Z")

</div>

First of all Thanks!!, I Still have no answer on the debug.

 ![Sin título](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b93562f7631538dec8056247b3c7ef0b40f07ecd.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [29 July 2021 16:41 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/9 "2021-07-29T16:41:30Z")

</div>

1. have you refreshed the dashboard (clean browser cache)
2. if you uncomment `console.log(selected)` do you see the `selected` array in your browser's Console ?
3. something is sent but the array is empty .. have you ticked any of the checkboxes ?

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [29 July 2021 17:14 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/10 "2021-07-29T17:14:45Z")

</div>

I did all that you said but It keeps being empty the ms.payload

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [29 July 2021 17:21 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/11 "2021-07-29T17:21:13Z")

</div>

I dont know what is wrong .. it was working for me ..  
what about the console log ? did you check it in the browser ?

i kept working on the code before your reply and i refactored the code a bit.  
i was thinking that there is no need to create so many data attributes and i changed it to just one that has the json information, in order to parse it later and send it all at once ..

```auto
<div class="main">

    <table border="1" cellpadding="0" cellspacing="0" bordercolor="#D0D0D0" id="Table1" style="width:100%">
        <tr class="fondotitulo">
            <th>Marca</th>
            <th>Vencimiento</th>
            <th>Modelo</th>
            <th>Id</th>
            <th>✔</th>

        </tr>
        <tr ng-repeat="x in msg.payload | limitTo:100">

            <td class="fondotabla" style="text-align:center;">{{x.Marca}}</td>
            <td class="fondotabla" style="text-align:center;">{{x.Vencimiento}}</td>
            <td class="fondotabla" style="text-align:center;">{{x.Modelo}}</td>
            <td class="fondotabla" style="text-align:center;">{{x.id}}</td>
            <td class="fondotabla" style="text-align:center;">
                <input data-json="{{x}}" type="checkbox"/>
            </td>
        </tr>
    </table>

</div>

<input type="button" value="Get Selected" style="margin-top:10px;" onclick="check()" />

<script type="text/javascript">
    //Declare once to make scope available in functions
var theScope = scope;

    function check() {
        //Reference the Table.
        var grid = document.getElementById("Table1");
 
        //Reference the CheckBoxes in Table.
        var checkBoxes = Array.from(grid.getElementsByTagName("INPUT"));
        //console.log(checkBoxes)
 
        let selected = []
        //Loop through the CheckBoxes.
        checkBoxes.forEach( cb => {
            if (cb.checked) {
                var json = cb.dataset.json;
                selected.push( JSON.parse(json) )
            }
        })
               

        console.table(selected)
        theScope.send({payload:selected}) // send payload of selected to NR

    }
   
</script>

```

**Flow :**

```auto
[{"id":"7e1bacaca148f617","type":"inject","z":"4895ea10b4ee9ead","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Marca\":\"Marca1\",\"Vencimiento\":\"Vencimiento1\",\"Modelo\":\"Modelo1\",\"id\":1},{\"Marca\":\"Marca2\",\"Vencimiento\":\"Vencimiento2\",\"Modelo\":\"Modelo2\",\"id\":2},{\"Marca\":\"Marca3\",\"Vencimiento\":\"Vencimiento3\",\"Modelo\":\"Modelo3\",\"id\":3},{\"Marca\":\"Marca4\",\"Vencimiento\":\"Vencimiento4\",\"Modelo\":\"Modelo4\",\"id\":4},{\"Marca\":\"Marca5\",\"Vencimiento\":\"Vencimiento5\",\"Modelo\":\"Modelo5\",\"id\":5}]","payloadType":"json","x":170,"y":740,"wires":[["7b27e8162f964804"]]},{"id":"7b27e8162f964804","type":"ui_template","z":"4895ea10b4ee9ead","group":"be1716dc44c27277","name":"","order":0,"width":"12","height":"14","format":"<div class=\"main\">\n\n <table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#D0D0D0\" id=\"Table1\" style=\"width:100%\">\n <tr class=\"fondotitulo\">\n <th>Marca</th>\n <th>Vencimiento</th>\n <th>Modelo</th>\n <th>Id</th>\n <th>✔</th>\n\n </tr>\n <tr ng-repeat=\"x in msg.payload | limitTo:100\">\n\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.Marca}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.Vencimiento}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.Modelo}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">{{x.id}}</td>\n <td class=\"fondotabla\" style=\"text-align:center;\">\n <input data-json=\"{{x}}\" type=\"checkbox\"/>\n </td>\n </tr>\n </table>\n\n</div>\n\n<input type=\"button\" value=\"Get Selected\" style=\"margin-top:10px;\" onclick=\"check()\" />\n\n\n<script type=\"text/javascript\">\n //Declare once to make scope available in functions\nvar theScope = scope;\n\n\n function check() {\n //Reference the Table.\n var grid = document.getElementById(\"Table1\");\n \n //Reference the CheckBoxes in Table.\n var checkBoxes = Array.from(grid.getElementsByTagName(\"INPUT\"));\n //console.log(checkBoxes)\n \n let selected = []\n //Loop through the CheckBoxes.\n checkBoxes.forEach( cb => {\n if (cb.checked) {\n var json = cb.dataset.json;\n selected.push( JSON.parse(json) )\n }\n })\n \n\n console.table(selected)\n theScope.send({payload:selected}) // send payload of selected to NR\n\n }\n \n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":340,"y":740,"wires":[["f031ce5e80e92150"]]},{"id":"f031ce5e80e92150","type":"debug","z":"4895ea10b4ee9ead","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":530,"y":740,"wires":[]},{"id":"be1716dc44c27277","type":"ui_group","name":"Default","tab":"4d0a4c2538b36c79","order":1,"disp":true,"width":"12","collapse":false},{"id":"4d0a4c2538b36c79","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [29 July 2021 17:27 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/12 "2021-07-29T17:27:49Z")

</div>

it doesn't work either, still appears empty. I don´t understeand why.  
I send you a pic of the dashboard, but it´s only the table with the data, not much.

 ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4897a4e0be75ed2c4ba7bf99beb44a3ba663b97.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [29 July 2021 17:37 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/13 "2021-07-29T17:37:36Z")

</div>

if you **Import** the flow i sent you **without** making any changes or wiring it to your db ..  
does that work ?

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [29 July 2021 17:58 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/14 "2021-07-29T17:58:16Z")

</div>

Yes I tried with your flow but it´s the same, debugs said empty and on the console log the same.

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [29 July 2021 18:15 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/15 "2021-07-29T18:15:22Z")

</div>

I got it!!!! it works. Thanks you so much!!!

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [29 July 2021 18:18 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/16 "2021-07-29T18:18:30Z")

</div>

great !!! .. out of curiosity .. what was the problem ?

---

<div class="post-metadata">

**Author:** ![LucasPelu](https://avatars.discourse-cdn.com/v4/letter/l/977dab/32.png) [@LucasPelu](https://discourse.nodered.org/u/LucasPelu)\
**Post date:** [30 July 2021 15:16 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/17 "2021-07-30T15:16:16Z")

</div>

honestly I dont know I re Copied the files and it works  
Thank you so much

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 August 2021 15:17 UTC](https://discourse.nodered.org/t/checkbox-checked-send-payload-to-a-variable/49045/18 "2021-08-13T15:17:06Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.