'get checkbox element

I'm making a checkbox where every user presses the checkbox, then the contents of the checkbox will appear in the list section : as shown here

the problem is the checkbox that works is only the first checkbox in the list and every time the user presses the checkbox, the content that shown in the list is only the last data in the database. here is my code :

@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">
                                                    <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

Here is the code that shows the selected checkbox content :

<ol id="list" 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="">{{ $user->name }}</div>
                                    </div>
                                </li>
                                </div>
                            </ol>

and here is the javascript code :

<script>
    
function checkBox(){
    // console.log(e)
    var cb = document.getElementById("approver");
    var text = document.getElementById("list");
    if(cb.checked==true){
        text.style.display="block";
    } else {
        text.style.display="none";
    }
}

</script>

any solutions?

javascripthtmllaravel


Solution 1:[1]

You can use the passed reference to the checkbox instead of using getElementById as it gets the first occurrence for an element with the provided id, for more details please check Document.getElementById.

You JS code could be like this:

<script>

function checkBox(cb){
    // console.log(e)
    var text = document.getElementById("list");
    if(cb.checked==true){
        text.style.display="block";
    } else {
        text.style.display="none";
    }
}

</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A.Amayreh

Related Questions