I would like to make get and remove value on checkbok when user checked and unchecked the checkbox. The contents of the checked checkbox will appear in the list section as a picture here[1] [1]: https://i.stack.imgur.com/7AfhD.png

The problem is that when one of the checkboxes is unchecked, all the lists in the "list approver" are deleted. So how to delete the only unchecked checkbox values ​​from the approver list?

here is my code :

@foreach($users as $user)
                                    <ol  >
                                            <div >
                                            <li >
                                                <div >
                                                <input onclick="checkBox(this)"  type="checkbox" id="approver" value="{{ $user->name }}">
                                                    <div >
                                                        <img  src="{{ url('/assets/img/avatars/3.png') }}">
                                                    </div>
                                                    <div >
                                                    <div >{{ $user->name }}</div>
                                                    <label for="" >{{ $user->email }}</label>
                                                    </div>
                                                </div>
                                                </input>
                                            </li>
                                        </div>
                                    </ol>
                                    @endforeach

Here is the code that shows the selected checkbox content :

<div id="listUser"></div>
                        
                            <ol  style="display:none">
                            <div >
                                <li >
                                    <div >
                                        <div >
                                            <img  src="{{ url('/assets/img/avatars/3.png') }}">
                                        </div>
                                        <div >
                                        <div >{{ $users[0]->name }}</div>
                                    </div>
                                </li>
                                </div>
                            </ol>
                        </div>

And here is the javascript code :

function checkBox(cb){
    var text = document.getElementById("list");
    var inners = '<ol id="list" >' 
                            '<div >' 
                                '<li >' 
                                    '<div >' 
                                        '<div >' 
                                            '<img  src="{{ url("/assets/img/avatars/3.png") }}">' 
                                        '</div>' 
                                        '<div >' 
                                        '<div >' 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 = "";
    }
}

Any solution??

CodePudding user response：

First the input type needs to be checkbox. Second create an unique id for each OL to access the element on the page. Third remove the element by accessing it through its id

Your code is corrected and i wish the works for your.

<?php $id=0; ?>
@foreach($users as $user)
<?php $id  =1; ?>
<ol >
    <div >
        <li >
            <div >
                <input type="checkbox" value="<?php echo $id; ?>" onclick="checkBox(this)"  type="checkbox" id="approver"
                    value="{{ $user->name }}">
                <div >
                    <img  src="{{ url('/assets/img/avatars/3.png') }}">
                </div>
                <div >
                    <div >{{ $user->name }}</div>
                    <label for="" >{{ $user->email }}</label>
                </div>
            </div>
        </li>
    </div>
</ol>
@endforeach


<script>
    function checkBox(cb) {
        var inners = '<ol id="'  cb.value  '" >'  
            '<div >'  
            '<li >'  
            '<div >'  
            '<div >'  
            '<img  src="{{ url("//3.png") }}">'  
            '</div>'  
            '<div >'  
            '<div >'   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>

CodePudding user response：

function checkBox(cb,name){
var id =  'approver_'   name;
    var text = document.getElementById("list");
    var inners = '<ol id="list" >' 
                            '<div >' 
                                '<li >' 
                                    '<div >' 
                                        '<div >' 
                                            '<img  src="{{ url("/assets/img/avatars/3.png") }}">' 
                                        '</div>' 
                                        '<div >' 
                                        '<div >' 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  >
                                        <div >
                                        <li >
                                            <div >
                                            <input onclick="checkBox(this)"  type="checkbox" id="approver_"  {{ $user->name }}  value="{{ $user->name }}">
                                                <div >
                                                    <img  src="{{ url('/assets/img/avatars/3.png') }}">
                                                </div>
                                                <div >
                                                <div >{{ $user->name }}</div>
                                                <label for="" >{{ $user->email }}</label>
                                                </div>
                                            </div>
                                            </input>
                                        </li>
                                    </div>
                                </ol>
                                @endforeach

Simply replace above code and check. Note :1) id="approver_" {{ $user->name }} --for assigning dynamic id with username 2) var id = 'approver_' name; -- for getting id

same question is here: https://stackoverflow.com/a/71233899/7204027