how to create multiple checkbox ?

Question

how to create multiple checkbox if i checked checkbox i want to show the checked value then uncheck checkbox remove value

Aman Gupta · Answer

Hi Velladurai, Please find the attached snippet for your issue. Here is the dummy code that I'd developed for your usecase. Checkbox Example body { font-family: Arial, sans-serif; padding: 20px; } .checkbox-container { margin-bottom: 20px; } .selected-values { margin-top: 20px; } 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.

Sundaram Subramanian · Answer

Checkbox Example Option 1 Option 2 Option 3 Option 4 Checked Values: $(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(); } }); });

how to create multiple checkbox ?

Answers (2)