how to create multiple checkbox ?

$(document).ready(function() { $('.checkbox').change(function() { var value = $(this).val(); var checkedValuesList = $('#checkedValues'); if ($(this).is(':checked')) { // Add the checked value to the list checkedValuesList.append('

' + value + '

'); } else { // Remove the unchecked value from the list checkedValuesList.find('li').filter(function() { return $(this).text() === value; }).remove(); } }); });

Hi Velladurai,

Please find the attached snippet for your issue.

Here is the dummy code that I'd developed for your usecase.

    
    
    
    




     Option 1
     Option 2
     Option 3
     Option 4



    
Selected Values:
    

        
    

 

document.addEventListener("DOMContentLoaded", () => {
    const checkboxes = document.querySelectorAll('.checkbox');
    const selectedValuesList = document.getElementById('selectedValuesList');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', (event) => {
            const value = event.target.value;

            if (event.target.checked) {
                addValue(value);
            } else {
                removeValue(value);
            }
        });
    });

    function addValue(value) {
        const listItem = document.createElement('li');
        listItem.textContent = value;
        listItem.setAttribute('data-value', value);
        selectedValuesList.appendChild(listItem);
    }

    function removeValue(value) {
        const listItem = selectedValuesList.querySelector(`[data-value="${value}"]`);
        if (listItem) {
            selectedValuesList.removeChild(listItem);
        }
    }
});

Hope this will help you.