如何使用复选框而不是单击事件来选择列表框中的值

how to select the values in a list box with the use of checkboxes instead of click event

本文关键字：列表选择事件复选框何使用单击更新时间：2023-09-26

我有一个包含对象列表的列表框。我有一个与列表元素相对应的复选框列表。单击复选框时，应选择或取消选择列表中的相应值，而无需手动选择列表。所有复选框都应该发生这种情况。我正在通过angularjs实现这个功能。

这是我迄今为止写的代码。我可以进行选择，但每次只进行一次选择。我想要列表上的多项选择。

<!DOCTYPE html>
<html lang="en">  
 <head>  
   <title>AngularJS Listbox with Checkbox3</title>  
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
   <link type="text/css" rel="stylesheet" href="styles.css"></link>  
   <script>  
        var app = angular.module('myapp', []);  
        app.controller('controller', function($scope) { 
            $scope.months = [{name: 'January', selected: false},
                            {name: 'February', selected: false},
                            {name: 'March', selected: false},
                            {name: 'April', selected: false},
                            {name: 'May', selected: false},
                            {name: 'June', selected: false},
                            {name: 'July', selected: false}, 
                            {name: 'August', selected: false},
                            {name: 'September', selected: false},
                            {name:'October', selected: false},
                            {name: 'November', selected: false},
                            {name: 'December', selected: false}]; 
            $scope.selection=[];
              // toggle selection for a given month by name
              $scope.toggleSelection = function toggleSelection(name) {
                 var idx = $scope.selection.indexOf(name);
                 var count = 0;
                 // is currently selected
                 if (idx > -1) {
                   $scope.selection.splice(idx, 1);
                  for(var i=0; i<$scope.months.length; i++)
                  {
                     var obj = $scope.months[i];
                     if(obj.name == name)
                     {
                        count++;
                        $scope.isSelected = function isSelected(monthName, selected)
                        {
                            if(monthName == name)
                            {
                                selected = false;
                                console.log(count+'. '+name+' '+selected+''n');
                                return selected;
                            }
                        }
                     }
                   }
                 }
                 // is newly selected
                 else {
                    $scope.selection.push(name);
                   for(var i=0; i<$scope.months.length; i++)
                  {
                     var obj = $scope.months[i];
                     if(obj.name == name)
                     {
                        count++;
                        $scope.isSelected = function isSelected(monthName, selected)
                        {
                            if(monthName == name)
                            {
                                selected = true;
                                console.log(count+'. '+name+' '+selected+''n');
                                return selected;
                            }
                        }
                     }
                   }
                 }
             };         
        });
   </script>  
 </head>  
 <body ng-app="myapp">  
   <div class="box"  ng-controller="controller">
    <div align="center"> 
     <h1>AngularJS Listbox with Checkbox3</h1>  
     <select style="width: 100%;" size="7" ng-model="items" multiple > 
         <!-- ng-options="month.name as month.name for month in months">  -->
         <option ng-repeat="month in months" value="{{month.name}}" ng-selected="isSelected(month.name, month.selected)">
           {{month.name}}
       </option>
     </select>
     </div>    
     <br>
    <div class="panel">
        <div ng-repeat="month in months">
            <div class="action-checkbox">
                <input id="{{month.name}}" type="checkbox" value="{{month.name}}" ng-checked="selection.indexOf(month.name) > -1"
                        ng-click="toggleSelection(month.name)" ng-model="check"/>
                <label for="{{month.name}}"></label>{{month.name}}<span>   {{check}}</span>
            </div>
        </div>
        <br>
        <!-- SELECTED ITEMS -->
        <span style="color:black;" class="selected-item">Selected Items:</span>
        <div ng-repeat="name in selection" class="selected-item">{{name}}</div>
    </div> 
    <h3>You have selected: {{items}}</h3>
   </div> 
 </body>  
</html>

提前谢谢。

问题出在isSelected函数上。作为一种可以帮助您解决问题的变通方法，您可以将if (monthName == name)替换为if($scope.selection.indexOf(monthName) !== -1)。

只要重读一遍——是的，mic4ael是对的。在循环的每次迭代中，您实际上都在踩踏isSelected函数的版本/实例。

这意味着你可以使用他的建议，并有效地将其从两个不同的循环中去除。我无法对他的帖子发表评论。