javascript - Show Images based on two checkboxes state

Question

I am trying to achieve following using HTML, CSS, JS.

I have two check boxes and 4 Images:

• If none of them are checked -> show Image1 - Hide others
• If 1st is checked -> show Image2 - Hide others
• If 2nd is checked -> show Image3 - Hide others
• If both are checked -> show Image4 - Hide others

 <input id="chk-box1" type="checkbox"> checkbox 1 </input>
 <input id="chk-box2" type="checkbox" > checkbox 2 </input>
 <img alt="" id="1" src="1.jpg" />
 <img alt="" id="2" src="2.jpg" />
 <img alt="" id="3" src="3.jpg" />
 <img alt="" id="4" src="4.jpg" />

Answer 1

Use some jquery to handle showing the images

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()
    }
}