Question

我制作了一个简单的html表，其中包含一列复选框以及其他一些列。在上面，是一个删除按钮，它将调用我已经做过的服务功能，但我希望它删除该列所包含的每个复选框。我如何向删除函数发送一系列已检查的“项目”？

以下是删除按钮代码：

<div class="panel-body">
    <button class="btn pull-right btn-danger button-project-request form-group" value="Submit" ng-click=deleteCheckedProjects()>Delete</button>
</div>

下面是表格代码：

    <tbody>
        <tr ng-repeat="project in projects">
            <td><input type="checkbox" name="checkbox" value="project"/></td>
            <td ng-click=editRequestModule(project)>{{project.project.projNm}}</td>
            <td>{{convertMilliseconds(project.project.strtDt)}}</td>
            <td>{{convertMilliseconds(project.project.endDt)}}</td>
            <td>{{project.project.statusId.staDescription}}</td>
        </tr>
    </tbody>

有关如何解决此问题的任何建议？也许在Javascript中，建立一个包含所有复选框的双向有界数组？

Answer 1

我认为最简单的实现是用单独的删除按钮替换你的复选框：

style=

<tr ng-repeat="proj in projects"> <td><button ng-click="remove(proj)">delete</button><td> <td>{{proj.name}}</td>  </tr>的作用是：

remove

如果您设置了复选框，则可以在项目模型中包含某种“暂存删除”标记：

$scope.remove = function(proj){
    $scope.projects.splice($scope.projects.indexOf(proj), 1);
}

<tr ng-repeat="proj in projects"> <td><input type="checkbox" ng-model="proj.will_delete"></td> <td>{{proj.name}}</td>  </tr> <button ng-click="remove_staged()">delete</button>类似于：

remove_staged

Answer 2

您可以为每个复选框添加“项目复选框”类，然后使用

var checkboxes=document.getElementsByClassName('project-checkbox');

获取每个复选框。从那里你可以创建一个空数组，循环遍历checkboxes数组，并在将它添加到新数组之前检查它是否已被检查。

var checkboxes=document.getElementsByClassname('project-checkbox');
var checkedProjects=[];
for(var i=0;i<checkboxes.length;i++){
  if (checkboxes[i].checked) {
    checkedProjects.append(checkboxes[i]);  
  }
}

现在checkedProjects已选中每个复选框，您可以通过checkedProjects[i].parentNode

访问其中包含的项目

更有效的方法是在选中或取消选中时更改类名，然后使用document.getElementsByClassName()仅获取选中的类名。

Answer 3

以下是我将如何使用JS（JQuery）

添加到要跟踪课程.myCheckboxClass

的每个复选框

var deleteCheckedProjects = function() {

    // this will return all checked checkboxes with class .myCheckboxClass
    var checked = $('.myCheckboxClass:checkbox:checked') 
  
    // you can delete the input in the DOM
    for (i = 0; i < checked.length; i++) {
    
       checked[i].remove();
    
    }
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="myCheckboxClass" type="checkbox" name="first">Hello Sir!<br>
<input class="myCheckboxClass" type="checkbox" name="first">I am not here</input><br>

<br>

<button onclick="deleteCheckedProjects()" type="button">Click Me!</button>

或者你可以只返回数组：

var deleteCheckedProjects = function() {

  // this will return all checked checkboxes with class .myCheckboxClass
  return $('.myCheckboxClass:checkbox:checked') 

}

如何使用Javascript基于复选框列删除html表的选定行

3 个答案: