Databases
StackOverflow2013
Postsdbo
POUsing jquery selecting radio button when the div container is click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jquery selecting radio button when the div container is click
    text
    copied!<p>I wanted to select the radio button rad1, when I click on the flip div and same way rad2 button when I click on flip2 div. Here is the jquery code I used. problem is this code works for the first click event but If keep continuing then radio button will not be selected. What is the wrong with code?</p> <p>HTML :- </p> <pre><code>&lt;div id="flip" style="width:600px;"&gt; &lt;input type="radio" name="rad1" value="stat" id="exprad"&gt; &lt;label for="exprad" &gt;Experience&lt;/label&gt;&lt;br&gt; &lt;/div&gt; &lt;div id="flip2" style="width:600px;&gt; &lt;input type="radio" name="rad2" value="fin-maths" id="perrad"&gt; &lt;label for="perrad"&gt;Personal&lt;/label&gt;&lt;br&gt; &lt;/div&gt; </code></pre> <p>Jquery :- </p> <pre><code>&lt;script &gt; $(document).ready(function(){ $("#flip").click(function(){//when click on flip radio button $('input:radio[name=rad1]:nth(0)').attr('checked',true); $('input:radio[name=rad2]').attr('checked',false); }); }); }); $(document).ready(function(){ $("#flip2").click(function(){ $('input:radio[name=rad2]:nth(1)').attr('checked',true);//select radio button second $('input:radio[name=rad1]').attr('checked',false);//deselect radioi button first }); }); }); &lt;/script&gt; </code></pre> <p>Edited code</p> <pre><code> &lt;script &gt; $(document).ready(function(){ $("#flip").click(function(){//when click on flip radio button $('input:radio[name=rad1]:nth(0)').attr('checked',true); $('input:radio[name=rad2]').attr('checked',false); }); }); $(document).ready(function(){ $("#flip2").click(function(){ $('input:radio[name=rad2]:nth(1)').attr('checked',true);//select radio button second $('input:radio[name=rad1]').attr('checked',false);//deselect radioi button first }); }); &lt;/script&gt; </code></pre>
 

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