https://codepen.io/3lvcz/pen/PROdXx

Писать в sessionStorage: https://developer.mozilla.org/ru/docs/Web/API/Wind...

Если не подходит по времени жизни, то в localStorage:
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Если нет поддержки в нужных тебе браузерах, то в куки:
https://developer.mozilla.org/ru/docs/Web/API/Docu...

Библа для удобной работы с куками:
https://www.npmjs.com/package/js-cookie

Атрибут checked в верстке предназначен для того, чтобы декларативным образом выставить исходное значение инпуту. Впоследствии, при изменении состояния инпута, в инспекторе атрибут не обязан меняться (если ты об этом).

По коду, если тебе нужно контрить изменение инпута, то лучше написать так:

$('input[type="checkbox"]').change(function(event){
    if(event.target.checked){
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
});

Проблема в том, что у дочернего элемента не может быть z-index меньше, чем у родительского, как в твоем случае.

Реализовать можно по-разному, в зависимости от того, что и как еще ты там захочешь расположить. Как вариант, изменить так:

.block1 {
    /* background: #323232; */
    /* z-index: 10; */
}

.block1::after {
    content: "";
    position: relative;
    display: block;
    height: 100%;
    background: #323232;
}

img {
    /* z-index: 1; */
}

Обрати внимание, здесь не конечные стили, а только то, что следует добавить или убрать. Либо, если не хочется делать ::after, можно вместо него добавить после изображения элемент на верстку и прописать ему схожие стили.

Измененный пример: https://codepen.io/anon/pen/BrdYJQ