javascript - Changing checkbox value when div is clicked -
i have checkbox when clicked saves value along title in local storage. checkbox inside div. want checkbox value change when anywhere in div clicked not figure out how it. code far.
<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>
i tried changing
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" >
to
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="item.value = !item.value" >
it works not save values local storage, unchecked when open page again.
i looked @ other similar questions not involve localstorage.
the simplest approach make use of additional labels. modify markup little:
<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>
Comments
Post a Comment