当用户选中和取消选中复选框时，我想在复选框上设置get和remove值。选中复选框的内容将在列表部分显示为图片[1][1] ：https://i.stack.imgur.com/7AfhD.png
问题是当其中一个复选框被取消选中时；列表批准者"；被删除。那么如何删除唯一未选中的复选框值是否从审批者列表中删除？
这是我的代码：
@foreach($users as $user)
<ol class="list-group" >
<div class="card">
<li class="list-group-item group-containers">
<div class="row">
<input onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver" value="{{ $user->name }}">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
<label for="" class="text-secondary">{{ $user->email }}</label>
</div>
</div>
</input>
</li>
</div>
</ol>
@endforeach
以下是显示所选复选框内容的代码：
<div id="listUser"></div>
<ol class="list-group" style="display:none">
<div class="card">
<li class="list-group-item">
<div class="row">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $users[0]->name }}</div>
</div>
</li>
</div>
</ol>
</div>
这是javascript代码：
function checkBox(cb){
var text = document.getElementById("list");
var inners = '<ol id="list" class="list-group">'+
'<div class="card">'+
'<li class="list-group-item">'+
'<div class="row">'+
'<div class="col-1 c-avatar mr-3">'+
'<img class="c-avatar-img" src="{{ url("/assets/img/avatars/3.png") }}">'+
'</div>'+
'<div class="col-8">'+
'<div class="">'+cb.value+'</div>'+
'</div>'+
'</li>'+
'</div>'+
'</ol>'
if(cb.checked==true){
//text.style.display="block";
document.getElementById('listUser').innerHTML += inners;
} else {
// text.style.display="none";
document.getElementById('listUser').innerHTML = "";
}
}
有解决方案吗？？
首先，输入类型需要为复选框。其次，为每个OL创建一个唯一的id来访问页面上的元素。第三，通过id 访问元素来移除元素
你的代码被更正了，我希望你的工作。
<?php $id=0; ?>
@foreach($users as $user)
<?php $id +=1; ?>
<ol class="list-group">
<div class="card">
<li class="list-group-item group-containers">
<div class="row">
<input type="checkbox" value="<?php echo $id; ?>" onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver"
value="{{ $user->name }}">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
<label for="" class="text-secondary">{{ $user->email }}</label>
</div>
</div>
</li>
</div>
</ol>
@endforeach
<script>
function checkBox(cb) {
var inners = '<ol id="'+ cb.value +'" class="list-group">' +
'<div class="card">' +
'<li class="list-group-item">' +
'<div class="row">' +
'<div class="col-1 c-avatar mr-3">' +
'<img class="c-avatar-img" src="{{ url("//3.png") }}">' +
'</div>' +
'<div class="col-8">' +
'<div class="">' + cb.value + '</div>' +
'</div>' +
'</li>' +
'</div>' +
'</ol>';
if (cb.checked == true) {
//text.style.display = 'block';
document.getElementById('listUser').innerHTML += inners;
} else {
// text.style.display = 'none';
document.getElementById(cb.value).remove();
}
}
</script>
function checkBox(cb,name){
var id = 'approver_' + name;
var text = document.getElementById("list");
var inners = '<ol id="list" class="list-group">'+
'<div class="card">'+
'<li class="list-group-item">'+
'<div class="row">'+
'<div class="col-1 c-avatar mr-3">'+
'<img class="c-avatar-img" src="{{ url("/assets/img/avatars/3.png") }}">'+
'</div>'+
'<div class="col-8">'+
'<div class="">'+cb.value+'</div>'+
'</div>'+
'</li>'+
'</div>'+
'</ol>'
if(cb.checked==true){
//text.style.display="block";
document.getElementById('listUser').innerHTML += inners;
} else {
// text.style.display="none";
document.getElementById("listUser").innerHTML = "";
}
}
@foreach($users as $user)
<ol class="list-group" >
<div class="card">
<li class="list-group-item group-containers">
<div class="row">
<input onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver_"+ {{ $user->name }} value="{{ $user->name }}">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
<label for="" class="text-secondary">{{ $user->email }}</label>
</div>
</div>
</input>
</li>
</div>
</ol>
@endforeach
只需替换上面的代码并进行检查。注：1(id＝"；审批者_"+｛｛$user->name｝｝-用于为动态id分配用户名2( var id="approver_"+名称；--用于获取id
同样的问题也在这里：https://stackoverflow.com/a/71233899/7204027