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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -