title: jQuery detecting changes on two elements using keyup()
body: <p>HTML:</p>
  
  <p></p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="text" id="target" placeholder="example.com"&gt;
      &lt;input type="checkbox" name="http" id="http" value="http"&gt; http://
  &lt;/form&gt;
  
  &lt;div id="possible-targets"&gt;
      &lt;h4&gt;Possible matches: &lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS:</p>
  
  <p></p>
  
  <pre><code>var target_value;
  
  $(window).load(function () {
  
      $('#target').keyup(function () {
          target_value = $('#target').val();
  
          if (target_value == '') {
              $('#target-match').remove();
          } else if ($('#target-match').length == 0) {
              $('#possible-targets').append('&lt;h4&gt;&lt;span id="target-match"&gt;' + target_value + '&lt;/span&gt;&lt;/h4&gt;');
          } else if ($('#target-match').length != 0) {
              $('#target-match').html(target_value);
          }
  
          if ($('#http').prop('checked')) {
              if ($('#target-match-h').length == 0) {
                  $('#possible-targets').append('&lt;h4&gt;&lt;span id="target-match-h"&gt;http://' + target_value + '&lt;/span&gt;&lt;/h4&gt;');
              } else {
                  $('#target-match-h').html('http://' + target_value);
              }
          } else {
              $('#target-match-h').remove();
          }
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Here is a JSFiddle: <a href="http://jsfiddle.net/h2Uw4/" rel="nofollow noreferrer">http://jsfiddle.net/h2Uw4/</a></p>
  
  <p>Now when I start typing in the text input field I can see a live change in the <code>possible-targets</code> div, but when I click on the <code>http://</code> checkbox it still needs to type at least one more character in the text input field to make a live change and add another possible target.</p>
  
  <p>I tried to use <code>keyup()</code> on both <code>#target</code> (the text input) and <code>#http</code> (the checkbox) but it didn't work:</p>
  
  <p> </p>
  
  <pre><code>$('#target, #http').keyup()
  </code></pre>
  
  <p></p>