Get value from bootstrap data-toggle="button" on click
<p>I'm having trouble getting the value of the selected radio button with a bootstrap button group</p>

<pre><code>&lt;form action="cart.php" method="post" id="addtocart"&gt;
    &lt;div id="select1" class="product-options " data-toggle="buttons"&gt;
        &lt;label class="btn btn-default"&gt;&lt;input type="radio" name="option1" value="1"&gt; 1 &lt;/label&gt;
        &lt;label class="btn btn-default"&gt;&lt;input type="radio" name="option1" value="2"&gt; 2 &lt;/label&gt;
        &lt;label class="btn btn-default"&gt;&lt;input type="radio" name="option1" value="3"&gt; 3 &lt;/label&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>Upon a selection being made, I need to get the selected value. I understand I should be able to get the value like so:</p>

<pre><code>$("#select1").click(function() {
    var option1 = $("#select1 label.active input").val();
});
</code></pre>

<p>or alternatively</p>

<pre><code>$("#select1").click(function() {
    var option1 = $("#select1 input:radio:checked").val();
});
</code></pre>

<p>However both variants on first click return "undefinied" and on second click return the value that was selected "before". How can I get the selected value on first click?</p>