gpt4 book ai didi

javascript - 如何取消选中兄弟复选框

转载 作者:行者123 更新时间:2023-12-03 02:33:43 24 4
gpt4 key购买 nike

这是我的 Angular 表,当我单击一行中的复选框时,这里显示行数据。我的问题是,单击复选框时如何取消选中同级复选框?我尝试实现此目标,但无法实现。

var app= angular.module('myApp',[])
app.controller('myController',function($scope){

$scope.init = function(){
$scope.List=[
{
'encounterDate':'jan 11',
'visitId':'102359',
'emailId':'santhosh@gmail.com'
},
{
'encounterDate':'dec 2',
'visitId':'102360',
'emailId':'vijay@gmail.com'
}
];

}

$scope.showData = function(data){
alert("Encounter Date :" + data.encounterDate +" \n Visit ID:" + data.visitId +
"\n Patient name:"+ data.patientName +"\n Age:"+ data.age +"\n Referred by:"+ data.referredBy +"\n Email: "+ data.emailId)

}
})
<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myController" ng-init="init()">
<div class="container">

<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>S.no</th>
<th>Action</th>
<th>Encounter Date</th>
<th>Visit ID</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in List'>
<td>{{$index+1}}</td>
<td><input type='checkbox' class="checkBox"></td>
<td>{{data.encounterDate}}</td>
<td>{{data.visitId}}</td>
<td>{{data.emailId}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

我试过了,它不起作用..

$('input[type="checkbox"]').on('change', function() {

// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);

// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);

});

有什么建议吗?谁能告诉我,我做错了什么?

最佳答案

首先将 ng-model 添加到您的复选框

<td><input type='checkbox' ng-model="data.checked" ng-change="checkSibling(data)"  class="checkBox"></td>

并在选中复选框时使用 ng-change 取消选中同级

$scope.checkSibling = function(rowData){
angular.forEach($scope.List, function(value, key) {
if(value.visitId != rowData.visitId)
value.checked = false;
});
}

Demo

关于javascript - 如何取消选中兄弟复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48620893/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com