title: Using jQuery .find() with multiple conditions at the same time?
body: <p>I know that there are other ways of grabbing radio button values, but I want to know how to do this with .find().</p>
  
  <p>I only want to log the value of the selected radio button, so it requires finding by two conditions at the same time:</p>
  
  <p>The button with <code>name=area</code></p>
  
  <p>The button with <code>selected=selected</code></p>
  
  <pre><code>&lt;div class="radio"&gt;
    &lt;label&gt;
      &lt;input class="track-order-change" type="radio" name="area" id="area1" value="area1" checked="checked"&gt;
      Area 1
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="radio"&gt;
    &lt;label&gt;
      &lt;input class="track-order-change" type="radio" name="area" id="area2" value="area2"&gt;
      Area 2
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="radio"&gt;
    &lt;label&gt;
      &lt;input class="track-order-change" type="radio" name="area" id="area3" value="area3"&gt;
      Area 3
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When anything with the class <code>track-order-change</code> changes, it will run the function UpdateOrderSubmission.</p>
  
  <pre><code>$('.track-order-change').on('change', function() { updateOrderSubmission() });
  </code></pre>
  
  <p>I want the <code>updateOrderSubmission</code> function to console log the value of the radio button that is selected. </p>
  
  <pre><code>   var updateOrderSubmission = function() {
       var orderSubmission = {
         area: $('#submit-initial-form').find('[name=area],[checked=checked]').this.val()
       }
       console.log(orderSubmission)
     };
  </code></pre>
  
  <p>The code above doesn't work. How do I grab the value of the selected radio button? I need to do <code>.find()</code> with two conditions (name and checked), not just one condition.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So why does <code>$('#submit-initial-form').find('[name=area][checked=checked]').val();</code> NOT work? It's saying "Take the <code>submit-initial-form</code> ID and find a child element with <code>name=area</code> and <code>checked=checked</code> and return its value.</p>
  
  <p>Only <code>$('#submit-initial-form').find(':radio[name=area]:checked').val()</code> works. Why do you HAVE to specify that it's a radio button?</p>