# Checkbox & msg management in ui\_template

**URL:** <https://discourse.nodered.org/t/checkbox-msg-management-in-ui-template/86276>\
**Category:** General\
**Created:** [8 March 2024 14:32 UTC](https://discourse.nodered.org/t/checkbox-msg-management-in-ui-template/86276 "2024-03-08T14:32:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![robertobuti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertobuti/32/81936_2.png) [@robertobuti](https://discourse.nodered.org/u/robertobuti)\
**Post date:** [8 March 2024 14:32 UTC](https://discourse.nodered.org/t/checkbox-msg-management-in-ui-template/86276/1 "2024-03-08T14:32:00Z")

</div>

Hello,  
i would like manage 7 checkbox on dashboard, each one for any day of the week.  
A msg value with 1 bit for any checkbox is the input value to manage.  
Then a msg output with flag status will need to be manage, but this still a next step. I try to make the code but i'm not expert, so i ask your help to correct the code. (i apologise for errors, as i said i'm not sw engineer.)  
thank for cooperation

```auto
<div>
<input type="checkbox" id="doso0Day0" >Su
<input type="checkbox" id="doso0Day1" >Mo
<input type="checkbox" id="doso0Day2" >Tu          
<input type="checkbox" id="doso0Day3" >We                    
<input type="checkbox" id="doso0Day4" >Th                              
<input type="checkbox" id="doso0Day5" >Fr
<input type="checkbox" id="doso0Day6" >Sa
</div>
<script>
    (function(scope) {
    // $watch fires each time the node is triggered in the flow
    scope.$watch('msg', function(msg) {
    if (msg.payload == 0) {
    move();
    }
    DosoWeek0 = msg.payload;
    
    if (DosoWeek0 & 1)
    document.getElementById('doso0Day0').checked = true ;
    else
    document.getElementById('doso0Day0').checked = false ;

    if (DosoWeek0 & 2)
    document.getElementById('doso0Day1').checked = true ;
    else
    document.getElementById('doso0Day1').checked = false ;

    if (DosoWeek0 & 4)
    document.getElementById('doso0Day2').checked = true ;
    else
    document.getElementById('doso0Day2').checked = false ;

    if (DosoWeek0 & 8)
    document.getElementById('doso0Day3').checked = true ;
    else
    document.getElementById('doso0Day3').checked = false ;

    if (DosoWeek0 & 16)
    document.getElementById('doso0Day4').checked = true ;
    else
    document.getElementById('doso0Day4').checked = false ;

    if (DosoWeek0 & 32)
    document.getElementById('doso0Day5').checked = true ;
    else
    document.getElementById('doso0Day5').checked = false ;

    if (DosoWeek0 & 64)
    document.getElementById('doso0Day6').checked = true ;
    else
    document.getElementById('doso0Day6').checked = false ;
    })
})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [8 March 2024 16:06 UTC](https://discourse.nodered.org/t/checkbox-msg-management-in-ui-template/86276/2 "2024-03-08T16:06:14Z")

</div>

Maybe this will help, i used an array rather than bitwise operations.  
I have stored the array in a context var.  
When you change the check box the payload and is sent to node-red and that is used to update the context var.  
I have only done first two inputs, i have also used a forEach loop to update the check boxes in the $watch.

```auto
[{"id":"b410bc875acd3074","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[1,1,1,0,0,0,0]","payloadType":"json","x":472,"y":7761.000247001648,"wires":[["d9ca8de489e47385"]]},{"id":"d9ca8de489e47385","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"dosoWeek","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":652,"y":7761.000247001648,"wires":[["36bd392d84d9d92e"]]},{"id":"36bd392d84d9d92e","type":"ui_template","z":"d1395164b4eec73e","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<span>\n <input \n ng-model=\"dosoWeek0\" n\n g-change=\"send({payload: dosoWeek0, id:0})\" \n type=\"checkbox\" \n id=\"doso0Day0\" \n />Su\n\n<input ng-model=\"dosoWeek1\" ng-change=\"send({payload: dosoWeek1, id:1})\" type=\"checkbox\" id=\"doso0Day0\" />Mo\n<input type=\"checkbox\" id=\"doso0Day2\" />Tu \n<input type=\"checkbox\" id=\"doso0Day3\" />We \n<input type=\"checkbox\" id=\"doso0Day4\" />Th \n<input type=\"checkbox\" id=\"doso0Day5\" />Fr\n<input type=\"checkbox\" id=\"doso0Day6\" />Sa\n</span>\n\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if(msg.payload){\n msg.payload.forEach((dosoWeek, index) => {\n if (dosoWeek == 1){\n document.getElementById('doso0Day' + index).checked = true ;\n }else{\n document.getElementById('doso0Day' + index).checked = false ;\n }\n })\n }\n });\n })(scope)\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":802,"y":7761.000247001648,"wires":[["1551e37e02bf3dd7","61d33dd2aa80800a"]]},{"id":"1551e37e02bf3dd7","type":"debug","z":"d1395164b4eec73e","name":"debug 2485","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":972,"y":7761.000247001648,"wires":[]},{"id":"61d33dd2aa80800a","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"dosoWeek[msg.id]","pt":"flow","to":"$number($$.payload)","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"dosoWeek","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":882,"y":7821.000247001648,"wires":[["23b0728d85c4948f","d20931d7607a603f"]]},{"id":"23b0728d85c4948f","type":"debug","z":"d1395164b4eec73e","name":"debug 2486","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":912,"y":7861.000247001648,"wires":[]},{"id":"d20931d7607a603f","type":"ui_text","z":"d1395164b4eec73e","group":"8b5cde76.edd58","order":10,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":1052,"y":7821.000247001648,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![robertobuti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertobuti/32/81936_2.png) [@robertobuti](https://discourse.nodered.org/u/robertobuti)\
**Post date:** [8 March 2024 16:13 UTC](https://discourse.nodered.org/t/checkbox-msg-management-in-ui-template/86276/3 "2024-03-08T16:13:44Z")

</div>

Thank a lot

---

<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:** [22 March 2024 16:13 UTC](https://discourse.nodered.org/t/checkbox-msg-management-in-ui-template/86276/4 "2024-03-22T16:13:57Z")

</div>

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