javascript - 单击 div 时更改复选框值

Question

我有一个复选框，单击它会将值及其标题保存在本地存储中。这个复选框在一个 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" >

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

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

Answer 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>