HTML angular多选框

最新推荐文章于 2025-06-07 22:22:56 发布

qq_4027

最新推荐文章于 2025-06-07 22:22:56 发布

阅读量309

点赞数

分类专栏：网页

网页专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的多选框功能示例，通过定义控制器和作用域变量来控制页面上的多选框状态，并实现了选择确认功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js"></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               $scope.data = [{
                   key: "1",
                   value: "这是第一项"
               }, {
                   key: "2",
                   value: "这是第二项"
               }, {
                   key: "3",
                   value: "这是第三项"
               }, {
                   key: "4",
                   value: "这是第四项"
               }];

               $scope.arr = [];
               $scope.fun = function(flag, text) {
                   //alert(flag);
                   if(flag) {
                       //alert("asf");
                       $scope.arr.push(text);
                   } else {
                       for(i in $scope.arr) {
                           if($scope.arr[i] == text) {
                               $scope.arr.splice(i, 1);
                           }
                       }
                   }
//                   alert($scope.arr.length);
               }

               //确认按钮的点击事件
               $scope.check = function() {
                   if($scope.arr.length == 0) {
                       alert("请先选择");
                   } else {
                       alert($scope.arr);
                   }
               }
           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <button ng-click="check()">确认</button>
           <ul ng-repeat="i in data">
               <input type="checkbox" name="check" ng-value="i.key" ng-model="flag" ng-click="fun(flag,i.key)" /> {{i.value}}
           </ul>
       </center>
   </body>

</html>