CODEWITHSUNDEEP
jqueryhtml
wordpressm
wordpressm

Reputation: 3267

Using jquery selecting radio button when the div container is click

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?

HTML :- 

<div id="flip" style="width:600px;">
       <input type="radio" name="rad1" value="stat" id="exprad"> 
       <label for="exprad" >Experience</label><br>
</div>
<div id="flip2" style="width:600px;>
      <input type="radio" name="rad2" value="fin-maths" id="perrad">
     <label for="perrad">Personal</label><br>
</div>

Jquery :- 

<script > 
$(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


        });
    });
});
</script>

Edited code

 <script > 
    $(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

        });
    });
    </script>

Upvotes: 0

Views: 4585

Answers (2)

Gabe
Gabe

Reputation: 50493

Use a single document.ready and get rid of the nth. Also use prop(). You also has two extra }); which was causing an error.

jsfiddle

$(document).ready(function () {
    $("#flip").click(function () { //when click on flip radio button
        $('input:radio[name=rad1]').prop('checked', true);
        $('input:radio[name=rad2]').prop('checked', false);
    });

    $("#flip2").click(function () {
        $('input:radio[name=rad2]').prop('checked', true); //select radio button second
        $('input:radio[name=rad1]').prop('checked', false); //deselect radioi button first
    });
});

No javascript option

<label for="exprad" style="width:600px;">
       <input type="radio" name="rad1" value="stat" id="exprad"> 
       Experience<br/>
</label>
<label for="perrad"style="width:600px;>
     <input type="radio" name="rad2" value="fin-maths" id="perrad">
     Personal<br/>
</label>

Upvotes: 1

rjg132234
rjg132234

Reputation: 620

Make both radio buttons have the same name. Should solve your problem. And then you also don't need any jQuery.

<div id="flip" style="width:600px;"><input type="radio" name="rad1" value="stat" id="exprad"> <label for="exprad" >Experience</label><br></div> 
<div id="flip2" style="width:600px;><input type="radio" name="rad1" value="fin-maths" id="perrad"><label for="perrad">Personal</label><br></div>

Upvotes: 0

Related Questions