javascript - 图像应该在输入字段被填写时显示

Question

我在为一个学校元素编写代码时卡住了几天。这是我的代码:

**HTML**
 <fieldset id="step1">
<legend>Step 1</legend>
<p1>How many people will be attending?</p1>
 <div id="selected_form_code">
 <select id="select_btn">
 <option value="0">Please choose</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 </select>
  <div class="Attendees" id="form1">
      <h2 id="infoNames">Please provide full names:</h2>
      <form action="#" id="form_submit" method="post" name="form_submit">
          <div class="Attendees" id="Attendee1" name="a">
              <label>
                  Attendee 1 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee2" name="b">
              <label>
                  Attendee 2 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee3" name="c">
              <label>
                  Attendee 3 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee4" name="d">
              <label>
                  Attendee 4 name:
                  <input>
              </label>
          </div>
          <div class="Attendees" id="Attendee5" name="e">
              <label>
                  Attendee 5 name:
                  <input>
              </label>
          </div>

     </form>
  </div>
 </div>

 <p class="vinkje"><img src="vinkje.png" height="100" width="100"></p>
 </fieldset>

这是一个选择器，它将根据您选择的输入下拉表单。但是现在我必须在所有这些输入都被填写时得到一个图像。这是我的 jq 代码:

function checkInput() {
if (!$('Attendee1').val())
    $('.vinkje').hide();
}

这是我用于下拉菜单的代码，您可以在其中选择要附加的表单数量

$(document).ready(function() {
var isEmpty = true;
$('.vinkje').hide();
hideInput();
$('#select_btn').change(function() {
    hideInput();
    var sel_value = $('option:selected').val();
    if (sel_value == 0) {
        hideInput();
    } else {
        $("#infoNames").show();
        for (var i = 1; i <= sel_value; i++) {
            $("#Attendee" + i).show();
        }
    }
    checkInput();
});

$('.Attendees input').blur(function()
{
    checkInput();
});


});

Answer 1

为 form 内的输入的 keyup 事件创建一个事件处理程序

$("form input").on( "change keyup", function(){

  $(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set    

  $('.vinkje').toggle( $("form input[data-hasvalue='true']").length > 0 ); //if there is even one input with value, show the image

});

编辑

如果你只想在所有输入都填满时显示图像，则将其更改为

$("form input").on( "change keyup", function(){

  $(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set    

  $('.vinkje').toggle( $("form input[data-hasvalue='true']").length == $("form input").length ); //if there is even one input with value, show the image

});