如何仅在选择单选按钮时按动态更改背景图像并按提交按钮

Question

仅当选择单选按钮并按提交按钮

时，如何动态更改背景图像

link to sample

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>

请注意，我正在使用不透明度0（隐藏）的叠加层（背景上的div），并且我将为不透明度设置动画。无法为背景图像更改设置动画，它们会立即更改。

和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);