此頁面效果以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

初始化的時候，ng-checked的值為true的時候就會默認勾選復選框。ng-click事件監聽每一次點擊，item.selectedValue=!item.selectedValue;使其效果取反。假設某個復選框初始化為勾選，之后點擊一次該復選框，則item.selectedValue為false，即ng-checked="false"，頁面顯示不勾選。

1

2

3

4 {{item.roleName}}5

總結

以上是生活随笔為你收集整理的vue设置多选框默认勾选_Angular/Vue多复选框勾选问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。