Использование переключателя jquery при нажатии контейнера div

Question

Я хотел выбрать радиокнопку rad1, когда я нажимаю на флип-div и так же кнопку rad2, когда я нажимаю на flip2 div. Вот код jquery, который я использовал. проблема в том, что этот код работает для первого события кликов, но если продолжить, то переключатель не будет выбран. Что не так с кодом?

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> 

Отредактированный код

<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> 

Answer 1

Используйте один document.ready и избавиться от nth. Также используйте prop(). У вас также есть два дополнительных });, которые вызывают ошибку.

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 
    }); 
}); 

Нет Javascript опция

<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> 

Answer 2

Сделать обе кнопки радио имеют одинаковое название. Должно решить вашу проблему. И тогда вам также не нужен 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>