检查 div 而不是复选框

Question

我有一个 div，其中显示了我可以邀请参加拍卖的用户列表。列表是从数据库加载的

一切正常，我想检查所有标签而不是复选框，所以我这样做：

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

我在 css 上这样做：

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

但这仅适用于第一个用户，不适用于其他用户

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

Answer 2

这将在 input 上没有 ID 的情况下工作

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>