1# toggle<a name="ZH-CN_TOPIC_0000001164130770"></a> 2 3状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 4 5> **说明：** 6>从 API Version 5 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001127125082_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001127125082_section9288143101012"></a> 13 14不支持。 15 16## 属性<a name="zh-cn_topic_0000001127125082_section2598341175212"></a> 17 18除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 19 20<a name="zh-cn_topic_0000001127125082_table20633101642315"></a> 21<table><thead align="left"><tr id="zh-cn_topic_0000001127125082_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125082_a45273e2103004ff3bdd3375013e96a2a"><a name="zh-cn_topic_0000001127125082_a45273e2103004ff3bdd3375013e96a2a"></a><a name="zh-cn_topic_0000001127125082_a45273e2103004ff3bdd3375013e96a2a"></a>名称</p> 22</th> 23<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125082_ad5b10d4a60e44bb4a8bbb3b4416d7b27"><a name="zh-cn_topic_0000001127125082_ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a><a name="zh-cn_topic_0000001127125082_ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a>类型</p> 24</th> 25<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125082_ab2ae3d9f60d6475ab95ba095851a9d07"><a name="zh-cn_topic_0000001127125082_ab2ae3d9f60d6475ab95ba095851a9d07"></a><a name="zh-cn_topic_0000001127125082_ab2ae3d9f60d6475ab95ba095851a9d07"></a>默认值</p> 26</th> 27<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125082_p2063810588455"><a name="zh-cn_topic_0000001127125082_p2063810588455"></a><a name="zh-cn_topic_0000001127125082_p2063810588455"></a>必填</p> 28</th> 29<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125082_af5c3b773ed0a42e589819a6c8d257ca1"><a name="zh-cn_topic_0000001127125082_af5c3b773ed0a42e589819a6c8d257ca1"></a><a name="zh-cn_topic_0000001127125082_af5c3b773ed0a42e589819a6c8d257ca1"></a>描述</p> 30</th> 31</tr> 32</thead> 33<tbody><tr id="zh-cn_topic_0000001127125082_row128581827123812"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p158151581017"><a name="zh-cn_topic_0000001127125082_p158151581017"></a><a name="zh-cn_topic_0000001127125082_p158151581017"></a>value</p> 34</td> 35<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p98151887118"><a name="zh-cn_topic_0000001127125082_p98151887118"></a><a name="zh-cn_topic_0000001127125082_p98151887118"></a>string</p> 36</td> 37<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p78158817112"><a name="zh-cn_topic_0000001127125082_p78158817112"></a><a name="zh-cn_topic_0000001127125082_p78158817112"></a>-</p> 38</td> 39<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p8638135854515"><a name="zh-cn_topic_0000001127125082_p8638135854515"></a><a name="zh-cn_topic_0000001127125082_p8638135854515"></a>是</p> 40</td> 41<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p1981514819118"><a name="zh-cn_topic_0000001127125082_p1981514819118"></a><a name="zh-cn_topic_0000001127125082_p1981514819118"></a>状态按钮的文本值。</p> 42</td> 43</tr> 44<tr id="zh-cn_topic_0000001127125082_row1314733811"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p14144703815"><a name="zh-cn_topic_0000001127125082_p14144703815"></a><a name="zh-cn_topic_0000001127125082_p14144703815"></a>checked</p> 45</td> 46<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p174104714389"><a name="zh-cn_topic_0000001127125082_p174104714389"></a><a name="zh-cn_topic_0000001127125082_p174104714389"></a>boolean</p> 47</td> 48<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p174134719389"><a name="zh-cn_topic_0000001127125082_p174134719389"></a><a name="zh-cn_topic_0000001127125082_p174134719389"></a>false</p> 49</td> 50<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p86381558144516"><a name="zh-cn_topic_0000001127125082_p86381558144516"></a><a name="zh-cn_topic_0000001127125082_p86381558144516"></a>否</p> 51</td> 52<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p184114763819"><a name="zh-cn_topic_0000001127125082_p184114763819"></a><a name="zh-cn_topic_0000001127125082_p184114763819"></a>状态按钮是否被选中。</p> 53</td> 54</tr> 55</tbody> 56</table> 57 58## 样式<a name="zh-cn_topic_0000001127125082_section3655917541"></a> 59 60除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 61 62<a name="zh-cn_topic_0000001127125082_table83631117191317"></a> 63<table><thead align="left"><tr id="zh-cn_topic_0000001127125082_row336351719135"><th class="cellrowborder" valign="top" width="17.928207179282072%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125082_p736319179132"><a name="zh-cn_topic_0000001127125082_p736319179132"></a><a name="zh-cn_topic_0000001127125082_p736319179132"></a>名称</p> 64</th> 65<th class="cellrowborder" valign="top" width="14.088591140885912%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125082_p736311741311"><a name="zh-cn_topic_0000001127125082_p736311741311"></a><a name="zh-cn_topic_0000001127125082_p736311741311"></a>类型</p> 66</th> 67<th class="cellrowborder" valign="top" width="21.41785821417858%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125082_p836331716138"><a name="zh-cn_topic_0000001127125082_p836331716138"></a><a name="zh-cn_topic_0000001127125082_p836331716138"></a>默认值</p> 68</th> 69<th class="cellrowborder" valign="top" width="6.979302069793021%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125082_p836314176137"><a name="zh-cn_topic_0000001127125082_p836314176137"></a><a name="zh-cn_topic_0000001127125082_p836314176137"></a>必填</p> 70</th> 71<th class="cellrowborder" valign="top" width="39.58604139586041%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125082_p10363151721312"><a name="zh-cn_topic_0000001127125082_p10363151721312"></a><a name="zh-cn_topic_0000001127125082_p10363151721312"></a>描述</p> 72</th> 73</tr> 74</thead> 75<tbody><tr id="zh-cn_topic_0000001127125082_row203632017171314"><td class="cellrowborder" valign="top" width="17.928207179282072%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p8363111761310"><a name="zh-cn_topic_0000001127125082_p8363111761310"></a><a name="zh-cn_topic_0000001127125082_p8363111761310"></a>color</p> 76</td> 77<td class="cellrowborder" valign="top" width="14.088591140885912%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p18363101741314"><a name="zh-cn_topic_0000001127125082_p18363101741314"></a><a name="zh-cn_topic_0000001127125082_p18363101741314"></a><color></p> 78</td> 79<td class="cellrowborder" valign="top" width="21.41785821417858%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p17456195124520"><a name="zh-cn_topic_0000001127125082_p17456195124520"></a><a name="zh-cn_topic_0000001127125082_p17456195124520"></a>#E5000000</p> 80</td> 81<td class="cellrowborder" valign="top" width="6.979302069793021%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p18363317181316"><a name="zh-cn_topic_0000001127125082_p18363317181316"></a><a name="zh-cn_topic_0000001127125082_p18363317181316"></a>否</p> 82</td> 83<td class="cellrowborder" valign="top" width="39.58604139586041%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p2363151712139"><a name="zh-cn_topic_0000001127125082_p2363151712139"></a><a name="zh-cn_topic_0000001127125082_p2363151712139"></a>状态按钮的文本颜色。</p> 84</td> 85</tr> 86<tr id="zh-cn_topic_0000001127125082_row15363111781318"><td class="cellrowborder" valign="top" width="17.928207179282072%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p18363111712132"><a name="zh-cn_topic_0000001127125082_p18363111712132"></a><a name="zh-cn_topic_0000001127125082_p18363111712132"></a>font-size</p> 87</td> 88<td class="cellrowborder" valign="top" width="14.088591140885912%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p12364101716134"><a name="zh-cn_topic_0000001127125082_p12364101716134"></a><a name="zh-cn_topic_0000001127125082_p12364101716134"></a><length></p> 89</td> 90<td class="cellrowborder" valign="top" width="21.41785821417858%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p0364117101318"><a name="zh-cn_topic_0000001127125082_p0364117101318"></a><a name="zh-cn_topic_0000001127125082_p0364117101318"></a>16px</p> 91</td> 92<td class="cellrowborder" valign="top" width="6.979302069793021%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p6364161719139"><a name="zh-cn_topic_0000001127125082_p6364161719139"></a><a name="zh-cn_topic_0000001127125082_p6364161719139"></a>否</p> 93</td> 94<td class="cellrowborder" valign="top" width="39.58604139586041%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p2364201716136"><a name="zh-cn_topic_0000001127125082_p2364201716136"></a><a name="zh-cn_topic_0000001127125082_p2364201716136"></a>状态按钮的文本尺寸。</p> 95</td> 96</tr> 97<tr id="zh-cn_topic_0000001127125082_row1836411177134"><td class="cellrowborder" valign="top" width="17.928207179282072%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p11364161781315"><a name="zh-cn_topic_0000001127125082_p11364161781315"></a><a name="zh-cn_topic_0000001127125082_p11364161781315"></a>allow-scale</p> 98</td> 99<td class="cellrowborder" valign="top" width="14.088591140885912%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p133641917161317"><a name="zh-cn_topic_0000001127125082_p133641917161317"></a><a name="zh-cn_topic_0000001127125082_p133641917161317"></a>boolean</p> 100</td> 101<td class="cellrowborder" valign="top" width="21.41785821417858%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p1336415173138"><a name="zh-cn_topic_0000001127125082_p1336415173138"></a><a name="zh-cn_topic_0000001127125082_p1336415173138"></a>true</p> 102</td> 103<td class="cellrowborder" valign="top" width="6.979302069793021%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p536415173134"><a name="zh-cn_topic_0000001127125082_p536415173134"></a><a name="zh-cn_topic_0000001127125082_p536415173134"></a>否</p> 104</td> 105<td class="cellrowborder" valign="top" width="39.58604139586041%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p536491719137"><a name="zh-cn_topic_0000001127125082_p536491719137"></a><a name="zh-cn_topic_0000001127125082_p536491719137"></a>状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。</p> 106<div class="note" id="zh-cn_topic_0000001127125082_note236431714138"><a name="zh-cn_topic_0000001127125082_note236431714138"></a><a name="zh-cn_topic_0000001127125082_note236431714138"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125082_p6364161721312"><a name="zh-cn_topic_0000001127125082_p6364161721312"></a><a name="zh-cn_topic_0000001127125082_p6364161721312"></a>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。</p> 107</div></div> 108</td> 109</tr> 110<tr id="zh-cn_topic_0000001127125082_row736421781317"><td class="cellrowborder" valign="top" width="17.928207179282072%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p6364717181310"><a name="zh-cn_topic_0000001127125082_p6364717181310"></a><a name="zh-cn_topic_0000001127125082_p6364717181310"></a>font-style</p> 111</td> 112<td class="cellrowborder" valign="top" width="14.088591140885912%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p18364121761313"><a name="zh-cn_topic_0000001127125082_p18364121761313"></a><a name="zh-cn_topic_0000001127125082_p18364121761313"></a>string</p> 113</td> 114<td class="cellrowborder" valign="top" width="21.41785821417858%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p236413174139"><a name="zh-cn_topic_0000001127125082_p236413174139"></a><a name="zh-cn_topic_0000001127125082_p236413174139"></a>normal</p> 115</td> 116<td class="cellrowborder" valign="top" width="6.979302069793021%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p153646178137"><a name="zh-cn_topic_0000001127125082_p153646178137"></a><a name="zh-cn_topic_0000001127125082_p153646178137"></a>否</p> 117</td> 118<td class="cellrowborder" valign="top" width="39.58604139586041%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p7364131711318"><a name="zh-cn_topic_0000001127125082_p7364131711318"></a><a name="zh-cn_topic_0000001127125082_p7364131711318"></a>状态按钮的字体样式。</p> 119</td> 120</tr> 121<tr id="zh-cn_topic_0000001127125082_row636418171130"><td class="cellrowborder" valign="top" width="17.928207179282072%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p7364817161320"><a name="zh-cn_topic_0000001127125082_p7364817161320"></a><a name="zh-cn_topic_0000001127125082_p7364817161320"></a>font-weight</p> 122</td> 123<td class="cellrowborder" valign="top" width="14.088591140885912%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p103641917161316"><a name="zh-cn_topic_0000001127125082_p103641917161316"></a><a name="zh-cn_topic_0000001127125082_p103641917161316"></a>number | string</p> 124</td> 125<td class="cellrowborder" valign="top" width="21.41785821417858%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p1436451761313"><a name="zh-cn_topic_0000001127125082_p1436451761313"></a><a name="zh-cn_topic_0000001127125082_p1436451761313"></a>normal</p> 126</td> 127<td class="cellrowborder" valign="top" width="6.979302069793021%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p143641717171314"><a name="zh-cn_topic_0000001127125082_p143641717171314"></a><a name="zh-cn_topic_0000001127125082_p143641717171314"></a>否</p> 128</td> 129<td class="cellrowborder" valign="top" width="39.58604139586041%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p1736431716139"><a name="zh-cn_topic_0000001127125082_p1736431716139"></a><a name="zh-cn_topic_0000001127125082_p1736431716139"></a>状态按钮的字体粗细。见<a href="js-components-basic-text.md#zh-cn_topic_0000001127125018_section5775351116">text组件font-weight的样式属性</a>。</p> 130</td> 131</tr> 132<tr id="zh-cn_topic_0000001127125082_row53641817161320"><td class="cellrowborder" valign="top" width="17.928207179282072%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125082_p19364171718135"><a name="zh-cn_topic_0000001127125082_p19364171718135"></a><a name="zh-cn_topic_0000001127125082_p19364171718135"></a>font-family</p> 133</td> 134<td class="cellrowborder" valign="top" width="14.088591140885912%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125082_p336415178135"><a name="zh-cn_topic_0000001127125082_p336415178135"></a><a name="zh-cn_topic_0000001127125082_p336415178135"></a><string></p> 135</td> 136<td class="cellrowborder" valign="top" width="21.41785821417858%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125082_p10365131761314"><a name="zh-cn_topic_0000001127125082_p10365131761314"></a><a name="zh-cn_topic_0000001127125082_p10365131761314"></a>sans-serif</p> 137</td> 138<td class="cellrowborder" valign="top" width="6.979302069793021%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125082_p2036581716132"><a name="zh-cn_topic_0000001127125082_p2036581716132"></a><a name="zh-cn_topic_0000001127125082_p2036581716132"></a>否</p> 139</td> 140<td class="cellrowborder" valign="top" width="39.58604139586041%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125082_p133656177131"><a name="zh-cn_topic_0000001127125082_p133656177131"></a><a name="zh-cn_topic_0000001127125082_p133656177131"></a>状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过<a href="js-components-common-customizing-font.md">自定义字体</a>指定的字体，会被选中作为文本的字体。</p> 141</td> 142</tr> 143</tbody> 144</table> 145 146## 事件<a name="zh-cn_topic_0000001127125082_section3892191911214"></a> 147 148除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 149 150<a name="zh-cn_topic_0000001127125082_table101871711203115"></a> 151<table><thead align="left"><tr id="zh-cn_topic_0000001127125082_row1718751111316"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127125082_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001127125082_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001127125082_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 152</th> 153<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127125082_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001127125082_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001127125082_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 154</th> 155<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127125082_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001127125082_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001127125082_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 156</th> 157</tr> 158</thead> 159<tbody><tr id="zh-cn_topic_0000001127125082_row105681412318"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125082_p18889152411316"><a name="zh-cn_topic_0000001127125082_p18889152411316"></a><a name="zh-cn_topic_0000001127125082_p18889152411316"></a>change</p> 160</td> 161<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125082_p138891924103112"><a name="zh-cn_topic_0000001127125082_p138891924103112"></a><a name="zh-cn_topic_0000001127125082_p138891924103112"></a>{ checked：isChecked }</p> 162</td> 163<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125082_p1889002418312"><a name="zh-cn_topic_0000001127125082_p1889002418312"></a><a name="zh-cn_topic_0000001127125082_p1889002418312"></a>组件选中状态发生变化时触发。</p> 164</td> 165</tr> 166</tbody> 167</table> 168 169## 方法<a name="zh-cn_topic_0000001127125082_section2279124532420"></a> 170 171支持[通用方法](js-components-common-methods.md)。 172 173## 示例<a name="zh-cn_topic_0000001127125082_section520313404174"></a> 174 175``` 176<!-- xxx.hml --> 177<div style="flex-direction: column;"> 178 <text class="margin">1. Multiple choice example</text> 179 <div style="flex-wrap: wrap"> 180 <toggle class="margin" for="{{toggles}}">{{$item}}</toggle> 181 </div> 182 <text class="margin">2. Single choice example</text> 183 <div style="flex-wrap: wrap"> 184 <toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}" 185 value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle> 186 </div> 187</div> 188``` 189 190``` 191/* xxx.css */ 192.margin { 193 margin: 7px; 194} 195``` 196 197``` 198// xxx.js 199export default { 200 data: { 201 toggle_list: [ 202 { "id":"1001", "name":"Living room", "checked":true }, 203 { "id":"1002", "name":"Bedroom", "checked":false }, 204 { "id":"1003", "name":"Second bedroom", "checked":false }, 205 { "id":"1004", "name":"Kitchen", "checked":false }, 206 { "id":"1005", "name":"Study", "checked":false }, 207 { "id":"1006", "name":"Garden", "checked":false }, 208 { "id":"1007", "name":"Bathroom", "checked":false }, 209 { "id":"1008", "name":"Balcony", "checked":false }, 210 ], 211 toggles: ["Living room","Bedroom","Kitchen","Study"], 212 idx: "" 213 }, 214 allclick(arg) { 215 this.idx = arg 216 }, 217 allchange(e) { 218 if (e.checked === true) { 219 for (var i = 0; i < this.toggle_list.length; i++) { 220 if (this.toggle_list[i].id === this.idx) { 221 this.toggle_list[i].checked = true 222 } else { 223 this.toggle_list[i].checked = false 224 } 225 } 226 } 227 } 228} 229``` 230 231 232 233
