Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="../reset.css" rel="stylesheet"/>
        <link href="./style.css" rel="stylesheet"/>

        <title>MixItUp Demo - Checkboxes with Reset Checkbox</title>
    </head>
    <body>
        <div class="controls">
            <div class="checkbox-group">
                <div class="checkbox">
                    <label class="checkbox-label">All</label>
                    <input type="checkbox" value="all" checked/>
                </div>

                <div class="checkbox">
                    <label class="checkbox-label">Green</label>
                    <input type="checkbox" value=".green"/>
                </div>

                <div class="checkbox">
                    <label class="checkbox-label">Blue</label>
                    <input type="checkbox" value=".blue"/>
                </div>

                <div class="checkbox">
                    <label class="checkbox-label">Pink</label>
                    <input type="checkbox" value=".pink"/>
                </div>
            </div>

            <button type="button" class="control" data-sort="default:asc">Asc</button>
            <button type="button" class="control" data-sort="default:desc">Desc</button>
        </div>

        <div class="container">
            <div class="mix green"></div>
            <div class="mix green"></div>
            <div class="mix blue"></div>
            <div class="mix pink"></div>
            <div class="mix green"></div>
            <div class="mix blue"></div>
            <div class="mix pink"></div>
            <div class="mix blue"></div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>
        </div>

        <script src="../mixitup.min.js"></script>

        <script>
            // In this example, we must bind a 'change' event handler to
            // our checkboxes, then interact with the mixer via
            // its .filter() API methods.

            var containerEl = document.querySelector('.container');
            var checkboxGroup = document.querySelector('.checkbox-group');
            var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
            var allCheckbox = checkboxGroup.querySelector('input[value="all"]');

            var mixer = mixitup(containerEl);

            checkboxGroup.addEventListener('change', function(e) {
                var selectors = [];
                var checkbox;
                var i;

                if (e.target === allCheckbox && e.target.checked) {
                    // If the "all" checkbox was checked, uncheck all other checkboxes

                    for (i = 0; i < checkboxes.length; i++) {
                        checkbox = checkboxes[i];

                        if (checkbox !== allCheckbox) checkbox.checked = false;
                    }
                } else {
                    // Another checkbox was changed, uncheck "all".

                    allCheckbox.checked = false;
                }

                // Iterate through all checkboxes, pushing the
                // values of those that are checked into an array

                for (i = 0; i < checkboxes.length; i++) {
                    checkbox = checkboxes[i];

                    if (checkbox.checked) selectors.push(checkbox.value);
                }

                // If there are values in the array, join it into a string
                // using your desired logic, and send to the mixer's .filter()
                // method, otherwise filter by 'all'

                var selectorString = selectors.length > 0 ?
                    selectors.join(',') : // or '.' for AND logic
                    'all';

                mixer.filter(selectorString);
            });
        </script>
    </body>
</html>