JSFiddle - React, Tailwind, and code Playground

by Himanshu Tyagi

HTML

<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" class="hide" />
<img alt="3" id="3" src="3.jpg" title="3" class="hide" />
<img alt="4" id="4" src="4.jpg" title="4" class="hide" />

CSS

.hide {
    display:none;
}

JavaScript

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) {
    console.log(document.getElementById(n));
    document.getElementById(shown).style.display = 'none';
    document.getElementById(n).style.display = 'block';
    shown = n;

}