AngularJS获取复选框选中值（而非布尔值）问题求助

问题分析 #

你的代码存在几个关键问题导致无法正确获取复选框选中值：

• 标签拼写错误：<labe>应为<label>，且for属性未与input的id对应，导致标签与复选框关联失效
• 传参逻辑错误：第一个复选框传value是未定义变量；第二个未传参；第三个用ng-click传Travel会拿到状态更新前的旧值
• ng-true-value未正确包裹字符串：AngularJS会把未加单引号的内容解析为变量，而非字符串值
• 推荐用ng-change替代ng-click：ng-click在复选框状态改变前触发，ng-change是状态更新后触发，能获取最新选中状态

修正后的代码 #

JavaScript部分

// 用统一对象管理所有偏好选项，避免零散变量
$scope.favourites = {
  Food: false,
  Books: false,
  Travel: false
};

$scope.userFavourite = function() {
  // 筛选出所有选中的偏好项
  const selectedItems = Object.keys($scope.favourites)
    .filter(key => $scope.favourites[key]);
  alert('选中的偏好：' + selectedItems.join(', '));
};

HTML部分

<!-- 修正标签拼写，设置对应id，确保标签与复选框关联 -->
<label for="food-checkbox">
  <input type="checkbox" id="food-checkbox" 
         ng-model="favourites.Food" 
         ng-true-value="'food'" 
         ng-false-value="''"
         ng-change="userFavourite()"/>Food
</label>

<label for="books-checkbox">
  <input type="checkbox" id="books-checkbox" 
         ng-model="favourites.Books" 
         ng-true-value="'tea'" 
         ng-false-value="''"
         ng-change="userFavourite()"/>Books
</label>

<label for="travel-checkbox">
  <input type="checkbox" id="travel-checkbox" 
         ng-model="favourites.Travel" 
         ng-true-value="'travel'" 
         ng-false-value="''"
         ng-change="userFavourite()"/>Travel
</label>

可选：单个传递选中状态 #

如果需要单独处理每个复选框的选中/取消事件，可以修改为：

JavaScript部分

$scope.favourites = {
  Food: false,
  Books: false,
  Travel: false
};

$scope.userFavourite = function(itemName, isChecked) {
  alert(`${itemName} 已${isChecked ? '选中' : '取消选中'}`);
};

HTML部分

<label for="food-checkbox">
  <input type="checkbox" id="food-checkbox" 
         ng-model="favourites.Food" 
         ng-true-value="'food'" 
         ng-false-value="''"
         ng-change="userFavourite('Food', favourites.Food)"/>Food
</label>

内容的提问来源于stack exchange，提问作者jvk