angularJS中ng-ng-repeat里的单选框（radio）和多选框（checkbox）赋值取值

最新推荐文章于 2025-01-08 11:30:51 发布

zhangyufeng0126

最新推荐文章于 2025-01-08 11:30:51 发布

阅读量4.5k

点赞数 1

分类专栏： Web前端 HTML angularJS

本文链接：https://blog.csdn.net/zhangyufeng0126/article/details/78673402

版权

HTML 同时被 3 个专栏收录

30 篇文章

订阅专栏

Web前端

23 篇文章

订阅专栏

angularJS

9 篇文章

订阅专栏

本文介绍如何在AngularJS应用中使用ng-repeat处理多选（checkbox）和单选（radio）框的选择状态，包括实现全选/取消全选的功能及获取已选择项的值。

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

angularJS中ng-ng-repeat里的单选框（radio）和多选框（checkbox）赋值取值

HLML代码多选

  <div class="hy-checkk hlyw-fg-pandect-l">
                  <input type="checkbox"   ng-model="x.checked"  ng-change="selectOne()"/>
                    <label class="abs-cell"></label>
                </div>

js代码全选和取消

    $scope.cancelAllT = function () {
        angular.forEach($scope.dataDYWSB, function (i) {
            i.checked = true;

        });
    };
    $scope.cancelAllF = function () {
        angular.forEach($scope.dataDYWSB, function (i) {
            i.checked = false;
        });
    };

多选框取值

 sum=true;
          $scope.dataHT='';
          angular.forEach($scope.dataDYWSB, function (i) {
              if(i.checked){

                  if(sum){
                      $scope.dataHT= $scope.dataHT+'{"xsDvId":'+ i.xsDvId+'}';
                      sum=false;
                  }else {
                      $scope.dataHT= $scope.dataHT+',{"xsDvId":'+ i.xsDvId+'}';
                  }
              }
          });

HTML代码单选

   <div   ng-repeat="x in dataDYWSB">

 <div class="hlyw-dx-main">
                         <div class="hlyw-dx-main-l">是否检修</div>
                         <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio" ng-model="x.jxFlag" value="Y"> 是</div>
                         <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio" ng-model="x.jxFlag" value="N" > 否</div>
                     </div>
                     <div class="hlxnyyw-po-split-ss"></div>
                     <div class="hlyw-dx-main">
                         <div class="hlyw-dx-main-l">是否到位</div>
                         <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio" ng-model="x.dwFlag" value="Y"> 是</div>
                         <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio"   ng-model="x.dwFlag"  value="N" > 否</div>
                     </div>
                     <div class="hlxnyyw-po-split-ss"></div>
                     <div class="hlyw-dx-main">
                         <div class="hlyw-dx-main-l">是否完成</div>
                         <div class="hlyw-dx-main-c"> <input type="radio" class="hy-radio"  ng-model="x.doneFlag" value="Y"  > 是</div>
                  
</div>

取值

 console.log($scope.dataDYWSB);
            console.log(JSON.stringify($scope.dataDYWSB));