check a div instead of a checkbox

Question

I have a div, where I show a list of users that I can invite to my auction. The list is loaded from DB

All works fine, I want to check all the label and not the checkbox, so i do something like this:

<div ng-show="showBid" class="panel panel-default">
<div class="panel-heading">Invite Members</div>
<div class="panel-body">
    <div ng-repeat="user in users">
        <div class="user">
            <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)" name="checkbox" class="checkbox" id="checkbox">
            <label class="col-md-4" ng-hide="user.name == profile" for="checkbox">
              <img ng-src="{{user.img}}" class="userImage">
              <div class="username"> {{user.name}}</div>
              <div class="userrole"> {{user.role}} </div>
              <div class="usercompany">{{user.company}}</div>
          </label>
        </div>
   </div>
 </div>
 </div>

and i do this on the css:

label {
  display: block;
  cursor: pointer;
}
.checkbox {
  display: none;
}
.checkbox:checked + label {
  background-color: lightseagreen;
}

But this works only for the first user, it not works for the others

Check these links. [Link 1](http://stackoverflow.com/questions/5523213/create-a-div-that-acts-like-an-html-checkbox) [Link 2](http://stackoverflow.com/questions/584239/click-on-a-div-to-toggle-a-checkbox-inside-of-it-using-javascript) — Nimish, May 03 '17 at 14:23

Nick De Jaeger · Answer 1 · 2017-05-04T06:50:42.660

1

label {
  display: block;
  background-color: #E4E4E4;
  border-bottom: 1px solid #CCC;
  cursor: pointer;
  padding: 5px 10px;
}

label * {
  display: inline-block;
}
.checkbox {
  display: none;
}
.checkbox:checked + label {
  background-color: red;
  color: white;
}

<div ng-show="showBid" class="panel panel-default">
  <div class="panel-heading">Invite Members</div>
  <div class="panel-body">
    <div ng-repeat="user in users">
      <div class="user">
        <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)" name="checkbox" class="checkbox" id="user-{{user.id}}">
        <label class="col-md-4" ng-hide="user.name == profile" for="user-{{user.id}}">
          <img ng-src="{{user.img}}" class="userImage">
          <div class="username">Messi</div>
          <div class="userrole">Striker</div>
          <div class="usercompany">Barcelona</div> 
        </label>
      </div>
    </div>
  </div>
</div>

edited May 04 '17 at 06:50

answered May 03 '17 at 14:17

Nick De Jaeger

1,247
10
13

i'm sorry, this works only for the first user, cause you use it again with another user. But when i do the ng-repeat, i get all the users at the same time – mpeg90 May 03 '17 at 14:30
I edited with part of your code that i have used. Can you help me on that? – mpeg90 May 03 '17 at 14:43
You just need to make sure that the input-'id' and the label-'for' are the same unique values for each user. You could use the {{user.id}} value for that. – Nick De Jaeger May 03 '17 at 14:46
{{user.name}}

{{user.role}}

{{user.company}}
Something like this? – mpeg90 May 03 '17 at 14:50
Almost, an HTML id parameter can't be pure number. So change them to id="user-{{user.id}}" and for="user-{{user.id}}". Ofcourse the user.id must be a row in the database table in this case. – Nick De Jaeger May 03 '17 at 14:56
@MarcoPagano Please update the question with code instead of posting code in comments – mplungjan May 04 '17 at 06:22

Ja9ad335h · Accepted Answer · 2017-05-03T15:24:59.290

this will work with no ids on input

var myApp = angular.module('myApp', [])
  .controller('UsersCtrl', function($scope) {
    $scope.users = [{
      name: 'User One',
      role: 'Admin',
      company: 'ABC Inc.'
    }, {
      name: 'User Two',
      role: 'Manafer',
      company: 'XYZ Inc.'
    }, {
      name: 'Foo Bar',
      role: 'Admin',
      company: 'ABC Inc.'
    }];
  });

body { background-color: #eee; color: #444; padding: 20px; }

.user label {
  display: block;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 2px;
  padding: 0;
  cursor: pointer;
}
.username { font-size: 14px; font-weight: bold; }
.user label>div { padding: 4px 10px; }
.user label .checkbox { display: none; }

.user label .checkbox:checked+div { background-color: teal; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="UsersCtrl">
  <div ng-repeat="user in users">
    <div class="user">
      <label class="col-md-4" ng-hide="user.name == profile">
        <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)" name="checkbox" class="checkbox">
          <div>
            <img ng-src="{{user.img}}" class="userImage">
            <div class="username">{{user.name}}</div>
            <div class="userrole">{{user.role}}</div>
            <div class="usercompany">{{user.company}}</div> 
          </div>
      </label>
    </div>
  </div>
</div>

I understand this, but this works for two user that you create. In my case i load all the users from the db in one time. when i write the label, it loads me 4 users that i stored, — mpeg90, May 03 '17 at 15:17

check a div instead of a checkbox

2 Answers2