Change image when both inputs are filled
<p>I have two inputs and one image... is it possible to change the image when both inputs are filled?</p>

<p>HTML:</p>

<pre><code>&lt;div class="loginForm"&gt;
    &lt;input class="input jmeno" type="text" name="jmeno" placeholder="jmeno" value=""&gt;&lt;br&gt;
    &lt;div id="input_container"&gt;&lt;input class="input heslo" type="text" name="heslo" placeholder="heslo" value=""&gt;
        &lt;img src="https://www.w3.org/2005/ajar/icons/16dot-blue.gif" id="input-blue-img"&gt;
        &lt;img src="http://www.berrylocate.com/images/dotgreen.png" id="input-green-img"&gt;
    &lt;/div&gt;  
&lt;/div&gt;
</code></pre>

<p>CSS: </p>

<pre><code>#input-green-img {display:none;}
</code></pre>

<p>JS:</p>

<pre><code>var $allInputs = $("input:text"),
$button = $("#input-blue-img");
$button2 = $("#input-green-img");
$allInputs.change(function() {
    var isEmpty = $allInputs.filter(function() {
        return ($(this).val()=="");
    });
    $button.hide();
    $button2.show();
    if(isEmpty.length == 0) {
        $button.show();
    }
});
</code></pre>

<p>JSfiddle: <a href="https://jsfiddle.net/qeubzwvy/1/" rel="nofollow">https://jsfiddle.net/qeubzwvy/1/</a></p>