Angular/Vue多复选框勾选问题

　　此页面效果以Angular实现，Vue也可按照其大致流程实现，其核心本质没有改变。
　　功能效果为：页面初始化效果为要有所有角色的复选框，要求初始化默认勾选的角色要显示勾选，之后，能按照最终勾选的状态提交发请求。

　　先查看效果：可以看到初始页面的此用户被赋予的角色只有一个“核算经办”，如图1红框所示，点击“分配角色”按钮后，进入分配角色页面。进入页面初始化，可以看到页面发起了两个请求：fetchAllProfileRole和fetchUserRole，如图2红框所示。fetchAllProfileRole请求的是所有的角色，fetchUserRole请求的是已被赋予的角色，即需要默认勾选的角色 。页面中左侧也可以看到“核算经办”这个角色的复选框被勾选了。

图1 初始页面的角色只有一个核算经办

 

图2 分配角色页面发起fetchAllProfileRole和fetchUserRole请求

 

图3 fetchUserRole请求是要求默认勾选的角色，这里即指核算经办。

 

　　现在我们进行一次测试，我们又勾选了一个“高级查询”的角色，然后进行提交，返回初始页面的时候发现这个用户已经拥有了这两个角色，如图4所示。再次点击“分配角色”按钮，发现“核算经办”和“高级查询”这两个角色的复选框被勾选了，如图5左侧复选框所示。由此，实现了我们所需的功能。

图4 这个用户被赋予了“核算经办”和“高级查询”两个角色

图5 “核算经办”和“高级查询”的复选框被默认勾选

 

　　roleList中存储的是所有角色，ownRoleList中存储的是所有要默认勾选的角色，先给所有的roleList中所有角色的属性 selectedValue 赋值false，然后在roleList中利用forEach方法对ownRoleList的每个角色进行匹配，如果是要默认勾选则赋值true，经过处理后的roleList如图6所示。roleNameSelected数组存的是最终勾选要被提交的角色id，如图6箭头所示。

图6 roleList和roleNameSelected数组

初始化js部分：

  1  $http.post("XXXXX/fetchAllProfileRole", params,  function   (data) {
   2      $scope.roleList =  data.responseData.data;
   3      $http.post("XXXXX/fetchUserRole", formData,  function   (data) {
   4          $scope.ownRoleList =  data.responseData.data;
   5           //  对要默认勾选的角色做匹配 
  6          $scope.roleList.forEach( function   (item) {
   7              item.selectedValue= false  ;
   8              $scope.ownRoleList.forEach( function   (item1) {
   9                   if (item.roleId== item1.roleId){
  10                      item.selectedValue= true  ;
  11                   }
  12               })
  13           })
  14       });
  15  });

View Code

查看更多关于Angular/Vue多复选框勾选问题的详细内容...