Javascript 基于两个复选框状态显示图像

我正在尝试使用HTML、CSS、JS实现以下功能

我有两个复选框和4个图像：

如果没有选中任何一个->显示图像1-隐藏其他图像 如果选中第一个->显示图像2-隐藏其他图像 如果选中第二个->显示图像3-隐藏其他图像 如果两者都选中->显示图像4-隐藏其他

---

使用一些jquery来处理显示图像

if ($("#chk-box1").is(":checked"))
{
    if ($("#chk-box2").is(":checked"))
    {
        $("#1").hide()
        $("#2").hide()
        $("#3").hide()
        $("#4").show()
    }
    else
    {
        $("#1").hide()
        $("#2").show()
        $("#3").hide()
        $("#4").hide()
    }
}
else
{
    if ($("#chk-box2").is(":checked"))
    {
        $("#1").hide()
        $("#2").hide()
        $("#3").show()
        $("#4").hide()
    }
    else 
    {
        $("#1").show()
        $("#2").hide()
        $("#3").hide()
        $("#4").hide()
    }
}

这将有助于：

js

html

---

到目前为止，答案是硬编码的，以使用元素的id

我构建了一种不同的方法，其中使用js类将javascript绑定到，并使用数据属性定义何时显示哪个图像。这使得代码的硬编码大大减少，并且可以在应添加多个复选框以及应更改图像显示方式的情况下进行扩展

函数$，文档{ 严格使用； var$document=$document； var CheckboxHandler={ $复选框：空， $images:null， 绑定：函数{ var self=这个； 此.$checkbox.eachfunction{ var$checkbox=$this； $checkbox.on'change'，函数{ self.triggerImageToShow； }; }; }, triggerImageToShow：函数{ var showImageFor=[]； 此.$checkbox.eachfunction{ var$checkbox=$this； 如果$checkbox.is'：已选中{ showmagefor.pushparseInt$checkbox.attr'data-checkbox'； } }; 此.$images.eachfunction{ var$image=$this； $image.trigger'show-image-for-checkbox'，[showImageFor]； } }, 初始化：函数$checkbox，$images{ 这是。$复选框=$复选框； 这。$images=$images； 这个.绑定； } }; 变量图像={ 显示复选框：[]， 绑定：函数{ var self=这个； 这是.$image.在'show-image-for-checkbox'，functionevent，show-for-checkbox{ var isArrayEqual=JSON.stringifyshowforcheckbox==JSON.stringifyself.showforcheckbox 如果是isArrayEqual{ self.$image.show； }否则{ self.$image.hide； } }; }, init：函数$image{ 这个。$image=$image； this.showForCheckboxes=$image.data'show-for-checkboxes'； 这个.绑定； } }; $document.readyfunction{ var$images=$'.js切换图像'； var$复选框=$'.js toggler'； var checkboxHandler=Object.createCheckboxHandler； init$checkbox$images； var startToShowImageFor=[]； $images.eachfunction{ var image=Object.createImage； image.init$this； image.$image.trigger'show-image-for-checkbox'，[starttoshowmagefor]； }; }; }jQuery，文档； 复选框1 复选框2

---

你忘记发布你尝试过的JavaScript。你尝试过什么？Stackoverflow不适合外包您的编程；我在这个问题上没有看到jQuery标记。

if ($("#chk-box1").is(":checked"))
{
    if ($("#chk-box2").is(":checked"))
    {
        $("#1").hide()
        $("#2").hide()
        $("#3").hide()
        $("#4").show()
    }
    else
    {
        $("#1").hide()
        $("#2").show()
        $("#3").hide()
        $("#4").hide()
    }
}
else
{
    if ($("#chk-box2").is(":checked"))
    {
        $("#1").hide()
        $("#2").hide()
        $("#3").show()
        $("#4").hide()
    }
    else 
    {
        $("#1").show()
        $("#2").hide()
        $("#3").hide()
        $("#4").hide()
    }
}

var shown = 1;

function toggleImages() {
    if (document.getElementById('chk-box1').checked) {
        if (document.getElementById('chk-box2').checked) {
            showImage(4);
        } else {
            showImage(2);
        }
    } else if (document.getElementById('chk-box2').checked) {
        showImage(3);
    } else {
        showImage(1);
    }
}

function showImage(n) {
    document.getElementById(shown).style.display = 'none';
    document.getElementById(n).style.display = 'block';
    shown = n;

}

<input id="chk-box1" type="checkbox" onchange="toggleImages();">checkbox 1</input>
<input id="chk-box2" type="checkbox" onchange="toggleImages();">checkbox 2</input>
<br/>
<img alt="1" id="1" src="1.jpg" title="1"/>
<img alt="2" id="2" src="2.jpg" title="2" style="display:none;" />
<img alt="3" id="3" src="3.jpg" title="3" style="display:none;" />
<img alt="4" id="4" src="4.jpg" title="4" style="display:none;" />