Форумы портала PHP.SU

CODE (html):
скопировать код в буфер обмена

<div id="rows" class="rows">
     <div class="row">
         <input type="radio" name="1" class="radio">
         <input type="radio" name="1" class="radio">
         <input type="radio" name="1" class="radio">
     </div>
     <div class="row">
         <input type="radio" name="2" class="radio">
         <input type="radio" name="2" class="radio">
         <input type="radio" name="2" class="radio">
     </div>
     <div class="row">
         <input type="radio" name="3" class="radio">
         <input type="radio" name="3" class="radio">
         <input type="radio" name="3" class="radio">
     </div>
 </div>
 
 <img id="image" class="hidden">

imageToggle (Отобразить)

CODE (javascript):
скопировать код в буфер обмена

var imageToggle = (function(doc){
 
    var box = doc.querySelector('#rows'),
        rows = box.querySelectorAll('.row'),
        rowCount = rows.length,
        toggleAll = [],
        cartes = [],
        data = {},
 
        /**
         * @type Function
         * @return {[]}
         */
        getCheckeds = function()
        {
            var checkeds = toggleAll.filter(function(toggle){
                return toggle.checked;
            });
 
            return checkeds.map(function(toggle, i){
                return  toggle.value;
            });
        },
        
        /**
         * @type Function
         * @param {[]} arr
         * @return {[]}
         */
        cartesianProduct = function (arr)
        {
            return arr.reduce(function(a,b){
                return a.map(function(x){
                    return b.map(function(y){
                        return x.concat(y);
                    })
                }).reduce(function(a,b){ return a.concat(b) },[])
            }, [[]])
        };
 
    [].forEach.call(rows, function(row, i){
 
        var toggles = row.querySelectorAll('[type="radio"]');
        cartes[i] = [];
 
        [].forEach.call(toggles, function(toggle, j){
            cartes[i][j] = toggle.value = j;
            toggleAll.push(toggle);
        });
 
    });
 
    cartes = cartesianProduct(cartes);
 
    return function(images, callBack)
    {
        callBack = callBack || function(){};
 
        if(images.length != cartes.length) {
            throw new Error('Должно быть ' + cartes.length + ' изображений');
        }
 
        images.forEach(function(image, i){
            data[cartes[i].join('-')] = image;
        });
        
        toggleAll.forEach(function(toggle){
            toggle.addEventListener('change', function(){
                var checkeds = getCheckeds();
                if(checkeds.length == rowCount) {
                    callBack(data[checkeds.join('-')]);
                }
            });
        });
    };
 
 
})(document);

CODE (javascript):
скопировать код в буфер обмена

var image = document.querySelector('#image'),
    len = Math.pow(3, 3),
    images = [],
    i = 0;
 
for(; i < len; i++) {
    images.push('image-' + (i + 1) + '.jpeg');
}
 
imageToggle(images, function(imageUrl){
 
    alert(imageUrl);
 
    image.src = imageUrl;
    image.classList.remove('hidden');
 
});