# Input type=checkbox toggle state

**URL:** https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301
**Category:** Dashboard
**Created:** [26 May 2020 09:26 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301 "2020-05-26T09:26:23Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![waqaslam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waqaslam/32/2271_2.png) [@waqaslam](https://discourse.nodered.org/u/waqaslam)
#### Post date: [26 May 2020 09:26 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/1 "2020-05-26T09:26:23Z")

</div>

Hi all,  
Angular (or web) is not my strong side, so here I am with a noob question 🙂  
I have a dashboard's _template_ widget within which I'm trying to switch the checked state for input type=checkbox based on a property **job.isSelected** , but somehow I can't figure this out. Below is what I tried based on some hints from Internet, but it didn't help.

```auto
<input type="checkbox"
    style="margin: 0; padding 0; height:11px"
    ng-click="send({payload: job.name})"
    [checked]="job.isSelected" />

```

I need to add the attribute **checked** dynamically.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 May 2020 20:58 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/2 "2020-05-28T20:58:35Z")

</div>

Sorry, not my area of expertise either but maybe this will bump up the question for someone else to pitch in 😀

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 May 2020 04:38 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/3 "2020-05-29T04:38:35Z")

</div>

May be something like this can help out.

```auto
[{"id":"dc924937.4d7d58","type":"ui_template","z":"bf66f153.dd752","group":"150516d9.b8a0a9","name":"","order":0,"width":0,"height":0,"format":"<input type=\"checkbox\" id=\"{{'checkbox_'+$id}}\" style=\"margin:auto;\"/>\n<script>\n(function(scope) {\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(document.getElementById(\"checkbox_\"+scope.$id)){\n document.getElementById(\"checkbox_\"+scope.$id).checked = msg.payload\n }\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":900,"y":200,"wires":[[]]},{"id":"942d0906.f7c578","type":"ui_button","z":"bf66f153.dd752","name":"","group":"150516d9.b8a0a9","order":1,"width":0,"height":0,"passthru":false,"label":"TRUE","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":730,"y":180,"wires":[["dc924937.4d7d58"]]},{"id":"82d3a96.e844258","type":"ui_button","z":"bf66f153.dd752","name":"","group":"150516d9.b8a0a9","order":1,"width":0,"height":0,"passthru":false,"label":"FALSE","tooltip":"","color":"","bgcolor":"","icon":"","payload":"false","payloadType":"bool","topic":"","x":720,"y":220,"wires":[["dc924937.4d7d58"]]},{"id":"ea61fda7.3b6f","type":"ui_ui_control","z":"bf66f153.dd752","name":"","events":"all","x":720,"y":80,"wires":[["15899af7.e27665"]]},{"id":"15899af7.e27665","type":"delay","z":"bf66f153.dd752","name":"","pauseType":"delay","timeout":"50","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":870,"y":80,"wires":[["a1ca8795.9ae5b8"]]},{"id":"a1ca8795.9ae5b8","type":"change","z":"bf66f153.dd752","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"job","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":840,"y":140,"wires":[["dc924937.4d7d58"]]},{"id":"150516d9.b8a0a9","type":"ui_group","z":"","name":"HOME","tab":"5b51be56.a85e4","order":1,"disp":true,"width":"4","collapse":false},{"id":"5b51be56.a85e4","type":"ui_tab","z":"","name":"ICONS","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![waqaslam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waqaslam/32/2271_2.png) [@waqaslam](https://discourse.nodered.org/u/waqaslam)
#### Post date: [29 May 2020 18:43 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/4 "2020-05-29T18:43:56Z")

</div>

Your solution seems to toggle the state via javascript code.  
Is there any way I can dynamically add `checked` attribute by evaluating the angular-boolean value?

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 May 2020 19:00 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/5 "2020-05-29T19:00:15Z")

</div>

Ui\_control part makes it for initial state based on on some value. Wasn't that the question

---

<div class="post-metadata">

### Author: ![waqaslam](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waqaslam/32/2271_2.png) [@waqaslam](https://discourse.nodered.org/u/waqaslam)
#### Post date: [29 May 2020 23:57 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/6 "2020-05-29T23:57:04Z")

</div>

I've found the solution. It can be done in two ways. 🙂

1. When using **HTML** , you need to make use of `ng-checked` to bind the value:

```auto
   <input type="checkbox"
      ng-click="send({payload: job.name})"
      ng-checked="job.isSelected" />

```

1. When using **[AngularJS Material](https://material.angularjs.org/latest/api/directive/mdCheckbox)**:

```auto
   <md-checkbox
      ng-click="send({payload: job.name})"
      ng-model="job.isSelected">
      {{job.name}}
   </md-checkbox>

```

---

<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: [12 June 2020 23:57 UTC](https://discourse.nodered.org/t/input-type-checkbox-toggle-state/27301/7 "2020-06-12T23:57:07Z")

</div>

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