是否在选中复选框Jquery时更改背景图像？

我正在尝试更改身体上的背景图像，我有透明和实心图案图像，并有以下代码：

$('#patterns, #solid').click(function() {           
    var pattern = $(this).val();                    
    if ($('input:checkbox').is(':checked')) {
        $('body').css('background-image', 'url("images/patterns/solid/'+ pattern +'.png")'); 
    } 
    else {
        $('body').css('background-image', 'url("images/patterns/'+ pattern +'.png")');
    }           
});

我在html中为透明模式选择了一个选项值，还有一个复选框，上面写着如果你想使用实体模式，请选中这个复选框。非常感谢

<label for="pattern">Choose Pattern</label>
        <select id="patterns" name="pattern">
            <option value="absurdidad">absurdidad</option>
            <option value="arches">arches</option>
            <option value="argyle">argyle</option>
            <option value="batthern">batthern</option>
        </select>

        <label for="solid">Use only solid patterns</label>
        <input type="checkbox" id="solid" />

选择模式
荒谬的
拱门
阿盖尔
巴特恩
仅使用实体图案

如果我把css（'background-color'，'red'）；}else{css（'background-color'，'black'）}；就像一个符咒一样，单击立即激发并更改背景色，保持透明图案并添加背景色，但不添加背景图像

$('#patterns').on('change', function() {
    var pattern = $(this).val(),
        url;
    if ($('#solid').is(':checked')) {
        url = "images/patterns/solid/" + pattern + ".png";
    } 
    else {
        url = "images/patterns/" + pattern + ".png";
    }           
    $('body').css('background-image', 'url(' + url + ')');
}).trigger('change');
$('#solid').click(function() {
    $('#patterns').trigger('change');
});

如果可行，则应简化为：

var $patterns = $('#patterns').on('change', function() {
    var str = $solid.is(':checked') ? 'solid/' : '';
    $('body').css('background-image', 'url(images/patterns/' + str + $(this).val() + '.png)');
}).trigger('change');
var $solid = $('#solid').click(function() {
    $patterns.trigger('change');
});

---

工作演示单击复选框即可更改图像：

代码

$('#checkboxID').click(function() {
    var newImg = new Image;
    newImg.onload = function() {

        $('#myimage').attr('src', this.src).removeClass('loading');
        $('#container .loader').hide();
    }
    $('#container .loader').show();
    $('#myimage').addClass('loading');
    if ($(this).is(':checked')) {
        newImg.src = 'http://images4.wikia.nocookie.net/__cb20111016234902/maditsmadfunny/images/thumb/5/54/Hulk-from-the-movie.jpg/180px-Hulk-from-the-movie.jpg';
    } else {
        newImg.src = 'http://www.hybrideb.com/content/evidence/doubletree.png';
    }

});

css

#container .loader{
    position:absolute;
    left:50px;
    top:50px;
    z-index:999;
    display:none;
}
#container{
    position:relative;
}
.loading{
 opacity:.5;
}

方法调用

$（this）.val（）

返回复选框的值。从html代码片段中，模式应该是组合框中所选选项的值

---

如果我理解正确，这应该可以实现您所寻找的：

// Update the background image on the body tag when:
//   a) A new pattern is selected, or
//   b) The solid checkbox is checked or unchecked
$('#patterns, #solid').change(function() {  
    var pattern,
        isSolid;

    // Get the pattern from the value selected in #patterns.    
    pattern = $('#patterns option:selected').val();

    // Use a solid background if #solid is checked.
    isSolid = $('#solid').is(':checked');

    if (isSolid) {
        $('body').css('background-image', 'url("images/patterns/solid/'+ pattern +'.png")');  
    } else {
        $('body').css('background-image', 'url("images/patterns/'+ pattern +'.png")');
    }
});

---

尝试使用css类，然后使用方法

.addClass

和

.removeClass

…将css类用于图像将花费大量时间，希望保持简单，如果我有100个图像x 2=200。。。我看没有必要使用classes@cula背景图像的路径正确吗？@Russ Ferri是的，在实现ckeckbox之前选中它，它也会更改背景图像，但首先必须选中该框，而不是从下拉列表中选择…我想立即单击以更改图像规则，它可以作为一个符咒，只需第一次点击就可以得到空白（只需bg颜色），在我更改为其他图案后，我会得到正确的图案，之后如果我再次取消选中则会得到透明图案，这很好，只需第一次签入就不会给我任何东西，只需bg颜色，就像删除它一样。谢谢大家的参与并给我答案。@cula真棒，很乐意帮忙！当你感到满意时，请接受最有用的答案。