checkbox запоминает при возврате на страницу

258

24 декабря 2017, 10:54

Имеется данный код суть такая что нельзя выбирать больше 5 чекбоксов(у меня их 10). Все работает но проблема в том что когда человек возвращаться назад после сабмита, checkbox остаются выбраными, а наш масив успешно чиститься и человек может выбирать еще. Подскажите решение.

(function() {
    var checklist = [];
    document.addEventListener('change', function(evt) {
        var el = evt.target;
        if (checklist.length > 4) {
            el.checked = false;
        }
        console.log(checklist);
        if (el.checked && checklist.length < 5) {
            checklist.push(el);
        } else {
            var idx = checklist.indexOf(el);
            if (idx > -1) {
                checklist.splice(idx, 1);
            }
        }
        document.getElementById("klv_podarkov").innerHTML = 5 - checklist.length;
        if (checklist.length > 4) {
            document.getElementById("buttonsubmit").disabled = false;
        } else {
            document.getElementById("buttonsubmit").disabled = true;
        }
    }, false);
})();

Answer 1

Вам нужно количество отмеченных checkbox вычислять на лету.

Получаем все чекбоксы, и считаем количество checked.

var allCheckboxes = document.querySelectorAll("input[type=checkbox]"); 
var arrayAllCheckboxes = Array.from(allCheckboxes); 
arrayAllCheckboxes.forEach(x => x.addEventListener("change",Changed)); 
 
function Changed() { 
   // расчитываем количество отмеченных checkbox 
   var checkedCheckboxes = arrayAllCheckboxes.filter(x=>x.checked); 
   var count = checkedCheckboxes.length; 
   console.log(count); 
} 
 
Changed();

<input type="checkbox" name="n1" checked /> 
<input type="checkbox" name="n2" checked /> 
<input type="checkbox" name="n3" checked /> 
<input type="checkbox" name="n4" /> 
<input type="checkbox" name="n5" />

Или можно даже сразу в одну строчку рассчитать количество отмеченных checkbox - document.querySelectorAll("input[type=checkbox]:checked").length.

var allCheckboxes = document.querySelectorAll("input[type=checkbox]"); 
    var arrayAllCheckboxes = Array.from(allCheckboxes); 
    arrayAllCheckboxes.forEach(x => x.addEventListener("change",Changed)); 
 
    function Changed() { 
       // расчитываем количество отмеченных checkbox 
       var count = document.querySelectorAll("input[type=checkbox]:checked").length; 
       console.log(count); 
    } 
 
    Changed();

    <input type="checkbox" name="n1" checked /> 
    <input type="checkbox" name="n2" checked /> 
    <input type="checkbox" name="n3" checked /> 
    <input type="checkbox" name="n4" /> 
    <input type="checkbox" name="n5" />