Databases
StackOverflow2013
Postsdbo
POjQuery siblings, toggleClass affecting other divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery siblings, toggleClass affecting other divs
    text
    copied!<p>I have an HTML form that begins like this:</p> <pre><code>&lt;div class="row form-group"&gt; &lt;label for="real_name" class="col-sm-3 control-label"&gt;Name&lt;/label&gt; &lt;div class="col-sm-5"&gt; &lt;input type="text" class="form-control require_name" name="real_name" id="real_name" maxlength="100"&gt; &lt;/div&gt; &lt;div class="col-sm-4 btn-group"&gt; &lt;div class="btn btn-default btn-private btn-warning"&gt; &lt;label for="private_check"&gt;Private&lt;/label&gt; &lt;input type="radio" id="private_check" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" /&gt; &lt;/div&gt; &lt;div class="btn btn-default btn-public"&gt; &lt;label for="public_check"&gt;Public&lt;/label&gt; &lt;input type="radio" id="public_check" class="privacy_check" name="privacy[real_name_privacy]" value=1 /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row form-group"&gt; &lt;label for="display_name" class="col-sm-3 control-label"&gt;Artist Name&lt;/label&gt; &lt;div class="col-sm-5"&gt; &lt;input type="text" class="form-control require_name" name="display_name" id="display_name" value="This guy" maxlength="100"&gt; &lt;/div&gt; &lt;div class="col-sm-4 btn-group"&gt; &lt;div class="btn btn-default btn-private"&gt; &lt;label for="private_check"&gt;Private&lt;/label&gt; &lt;input type="radio" id="private_check" class="privacy_check" name="privacy[display_name_privacy]" value=0 /&gt; &lt;/div&gt; &lt;div class="btn btn-default btn-public btn-warning"&gt; &lt;label for="public_check"&gt;Public&lt;/label&gt; &lt;input type="radio" id="public_check" class="privacy_check" name="privacy[display_name_privacy]" value=1 checked="checked" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And so on, about a dozen of them. For those .btn divs within the 'btn-group' I've got this jQuery:</p> <pre><code>$(".btn").click(function() { $(this).find("input").attr('checked', true); $(this).siblings().find("input").attr('checked', false); $(this).toggleClass('btn-warning btn-default'); $(this).siblings().toggleClass('btn-default btn-warning'); }); </code></pre> <p>Which is supposed to toggle the underlying input on each .btn when the .btn is clicked, and switch its class from .btn-warning to .btn-default, depending on whether or not it's been checked. The above obviously doesn't work: clicking a .btn on the first one will toggle the attribute of its sibling in .btn, but every .btn thereafter will toggle every one above it in the DOM, and the toggleClass doesn't do anything on the .btn group I've clicked on, but clicking a button in the btn-group below it alters the one above as well. I've tried to do it the hard way, with nested divs checking if each button has the necessary classes removed or added depending on the state of its underlying radio button, but got the same result. I think the problem is with siblings(), but anyone have ideas as to how to make this work without traversing the entire DOM looking for every .btn?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload