单击 div 时更改复选框值答案

【问题标题】：Changing checkbox value when div is clicked单击 div 时更改复选框值
【发布时间】：2015-06-14 05:10:06
【问题描述】：

我有一个复选框，单击该复选框会将值及其标题保存在本地存储中。此复选框位于 div 内。我希望在单击 div 中的任何位置时更改复选框值，但我不知道该怎么做。这是我目前的代码。

<div class="grid-menu">
    <div class="centering-and-alignment" ng-repeat="row in items | partition:3">

        <div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row">
            <label class="checkbox">
                <input type="checkbox" ng-model="item.value" name="item.title" ng-change="SaveCategories()">

                <div class="checkbox__checkmark"></div>
            </label>
            <ons-icon icon="{{item.icon}}"></ons-icon>
            <div class="grid-menu-item-label">{{item.title}}</div>
        </div>

    </div>
</div>

我尝试改变

<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" >

到

<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="item.value = !item.value" >

它可以工作，但是它不会将值保存到本地存储中，因此当我再次打开页面时，所有内容都未选中。

我查看了其他类似的问题，但它们不涉及本地存储。

【问题讨论】：

尝试将 div 更改为<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="item.value = !item.value;SaveCategories()" > -- 单击时调用“SaveCategories()”。
你的方法奏效了！非常感谢！

标签： javascript html css angularjs cordova

【解决方案1】：

最简单的方法是使用附加标签。为此，您需要稍微修改一下标记：

<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row">
    <label class="checkbox">
        <input type="checkbox" id="check-{{$index}}" ng-model="item.value" name="item.title" ng-change="SaveCategories();">
        <div class="checkbox__checkmark">{{item.value}}</div>
    </label>
    <label for="check-{{$index}}">
        <ons-icon icon="{{item.icon}}"></ons-icon>
    </label>
    <div class="grid-menu-item-label">
        <label for="check-{{$index}}">{{item.title}}</label>
    </div>
</div>

【讨论】：