Как динамически менять фоновое изображение, только если выбран переключатель и нажата кнопка "Отправить"

Question

Как динамически менять фоновое изображение, только если выбран переключатель и нажата кнопка "Отправить"

ссылка на образец

Answer 1

Используя только Javascript

Проверьте это онлайн: http://jsfiddle.net/OscarGarcia/t70prkda/

HTML тестовый код:

<form name="form" onsubmit="return check()">
    <p><input type="radio" name="bg" value="no" />
        Desactivate</p>
    <p><input type="radio" name="bg" checked="checked" value="yes" />
        Activate</p>
    <input type="submit" />
</form>

Javascript код:

function check() {
    if (document.form.bg.value == "yes") {
        document.body.style.background = "red";
    } else {
        document.body.style.background = "";
    }
    return false;
}

Редактировать 1: Использование jQuery

Проверьте это онлайн: http://jsfiddle.net/OscarGarcia/t70prkda/1/

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('body').css('background', "red");
    } else {
        $('body').css('background', "");
    }
    return false;
}

Редактировать 3: Изменение фонового изображения в JS и jQuery

Для простоты мой код меняет только цвет фона, этот меняет фоновое изображение: http://jsfiddle.net/OscarGarcia/t70prkda/2/

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('body').css('background-image', "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)");
    } else {
        $('body').css('background', "");
    }
    return false;
}

И в чистом JavaScript: http://jsfiddle.net/OscarGarcia/t70prkda/3/

function check() {
    if (document.form.bg.value == "yes") {
        document.body.style.backgroundImage = "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)";
    } else {
        document.body.style.background = "";
    }
    return false;
}

Редактировать 3: плавный переход фонового изображения

Попробуйте онлайн: http://jsfiddle.net/OscarGarcia/2g6rfdsf/

Код CSS:

body {
    height: 100%;
}

#overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin:0px;
    width: 100%;
    height: 100%;
    background: red url(http://thumbs.dreamstime.com/z/abstract-blue-tiled-background-5151518.jpg) -400px center;
    transition: all 2s ease-in-out;
    opacity: 0;
    z-index: -1;
}

HTML-код:

<div id="overlay"></div>
<form name="form" id="form" onsubmit="return check()">
    <p><input type="radio" name="bg" value="no" />
        Fade-out</p>
    <p><input type="radio" name="bg" checked="checked" value="yes" />
        Fade-in</p>
    <input type="submit" />
</form>

Обратите внимание, что я использую наложение (div на фоне) с непрозрачностью 0 (скрыто), и я буду анимировать прозрачность. Анимировать изменения фонового изображения невозможно, они будут меняться мгновенно.

И код JavaScript (версия JQuery):

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('#overlay').
            css('opacity', '1').
            css('background-position', '0px center');
    } else {
        $('#overlay').
            css('opacity', '0').
            css('background-position', '-400px center');
    }
    return false;
}

При нажатии кнопки наложение фона будет отображаться или скрываться плавно, потому что код CSS transition: all 2s ease-in-out; в то время как левая позиция тоже меняется медленно!

Надеюсь, поможет!

Answer 2

Вы захотите использовать jquery для регистрации eventHandler с обоими действиями.

Что-то вроде:

var backgroundHandler = function(){//whatever};
$('#radioWhatever').on('changed',backgroundHandler);
$('#submitbtn').on('click', backgroundHandler);