Why does jQuery's .each function repeat itself?
<p>The goal of the following bit of code is to toggle a group of radio buttons named "knowsnumberofpeople". Unfortunately, after the first message box shows up and the radio buttons change correctly, jQuery goes back and toggles everything to the original state.</p>

<p>Why does jQuery go back on previous items in the collection?</p>

<p>Code:</p>

<pre><code> &lt;script type="text/javascript"&gt;
        $("input[name='numberofpeople']").change(function() {
            $("input[name='knowsnumberofpeople']").each(function() {
            alert("Hi there.");                
                if ($(this).attr("checked") === "Checked") {
                    $(this).attr("checked", "");
                }
                else {
                    $(this).attr("checked", "Checked");
                }
            }
            );
        }
        );
    &lt;/script&gt;
</code></pre>

<p><strong>Edit</strong></p>

<p>To answer questions and comments...</p>

<p>No, the two things are different. One radio button has a textbox and the other one doesn't. Both radio buttons all have the same name. The radio buttons are named knowsnumberofpoeple and the textbox is named numberofpeople. They radio buttons have the same ID, thanks to ASP .NET MVC (I tried setting their id through htmlAttribute, didn't work out).</p>

<p>They go to their original state.</p>

<p>There are no events bound to the knowsnumberofpeople control.</p>

<p><em>Why not read the value and set it?</em></p>

<p>I tried and it doesn't work:</p>

<pre><code>$("input[name='knowsnumberofpeople']").val = true;
</code></pre>

<p>karbassi's solution doesn't work either. It just toggles the second radio button (the one without a textbox).</p>

<p><em>More Code</em></p>

<pre><code>&lt;form action="/ReserveSpace/ExpectedAttendance" method="post"&gt;
    &lt;fieldset class="smallform"&gt;
        &lt;input id="knowsnumberofpeople" name="knowsnumberofpeople" type="radio" value="True" /&gt;
        &lt;input id="numberofpeople" name="numberofpeople" type="text" value="" /&gt;

        &lt;label for="numberofpeople"&gt;
            (e.g. 20)&lt;/label&gt;&lt;br /&gt;
        &lt;input checked="checked" id="knowsnumberofpeople" name="knowsnumberofpeople" type="radio" value="False" /&gt;
        &lt;label&gt;
            I'm not sure.
        &lt;/label&gt;
        &lt;p&gt;
            &lt;input type="submit" value="Next" accesskey="N" /&gt;&lt;/p&gt;
    &lt;/fieldset&gt;
    &lt;/form&gt;
</code></pre>
