After submit/apply button Display checkbox values in div

I am tried to display the checkbox values after submit or apply button. Can anybody help me with this. I want values to be displayed after submit/apply button. particular column values display after particular column apply button is clicked. all the values should be in single div. This functionality is for filter.

(This will be done in back-end) after apply button the values on second column will change according to the checked values of first column. and so on.

The online code is there codepen

Your Codepen is hard to understand. I did not find any click handler for the Apply buttons.

You should try using some dummy data API to at least simulate your logic.
I usually use this one for sandboxes:
https://jsonplaceholder.typicode.com/

Is there a reason you need 4 different apply buttons instead of only one?

Or better yet trigger filtering when checkbox values change without buttons.

And return first 10-20 records and if user scrolls down then load more & more records.

At the moment I don’t see the need for arrays (arr and arr1), unless you plan to use that data elsewhere or in some other way.

With template strings there isn’t the need to concatenate like this

`text` + data + `more text`

Instead `text${data}more text` will do the trick.

The following is far from perfect, but is a bit of a tidy up/refactor of your code.

$(function() {

    const 
        doc         = window.document,
        results     = $('#results'), /* only search for this element once and not every time you click */
        icon_cross  = 'https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png';
        

    function clearCheckedResult(child) {

        $('input[class=mainlist]').prop('checked', false).trigger('change');
    }

    
    function processInputs(inputs) {

        let html = ``;

        for (let i = 0, len = inputs.length; i < len; i += 1) {

            /* for each iteration of the loop we will add the list item to our html string */
            html += `<li>${inputs[i].value}<a href='#' class='item' data-cb='${inputs[i].dataset.ref}'><img src='${icon_cross}'></a></li>\n`;
        }

        /* return the full list of checked items */
        return html;
    }

       
    $('button').on('click', function(event){
        
        let listItems = doc.querySelectorAll('input:checked');

        event.preventDefault();

        /* clear exisiting results */
        $(results).html('');

        /* append all the list items in one go */
        $('#results').append( processInputs(listItems) );
    })

    $('button.clear-inputs').on('click', function(){

        clearCheckedResult($(this));
    });
    
})

I would suggest reading up on some of the Javascript basics. MDN is a great resource for details on individual javascript functions e.g. google ‘mdn array foreach’

Cheers

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.