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

Question

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

Answer 1

您将希望使用 jquery 为这两个操作注册事件处理程序。

类似于：

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

Answer 2

仅使用 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;当按下按钮背景叠加层时会平滑显示或隐藏，而左侧位置变化也很慢！

希望对您有所帮助！

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

how to change background image dynamically only when radio button is selected and by pressing submit button

javascript

submit

button

radio

仅使用 Javascript

编辑 1：使用 jQuery

编辑 3：在 JS 和 jQuery

编辑 3：平滑背景图像过渡