Change Radio Button To Checked Or Unchecked Using Jquery

Question

This is my radio button

 $(".stayalert_checkbox").click(function(){ alert($(this).val()); $("#stay_alert_div").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="stay_alert_checkbox" class="stayalert_checkbox"> <div id="stay_alert_div" style="display:none"> <h1>I Am in Div</h1> </div> 

Here On Click Radio Button Div is toggleing. So

i want to uncheck radio when div is hide. i know there is option to use checkbox but is it possible using radio.

When i tried to get value of radio it return me "ON" .

I tried

$(".stayalert_checkbox").on('click',function(){
  if($(this).prop("checked",false)){
    $(this).prop("checked",true)
    $("#stay_alert_div").toggle();
  }else{
    $(this).prop("checked",false)
    $("#stay_alert_div").toggle();
  }
});

Answer 1

You can use a flag variable

Stack Snippet

 var isChecked = 0; $(".stayalert_checkbox").on('click', function() { if (isChecked) { $("#stay_alert_div").hide(); $(this).prop('checked', false); isChecked = 0; } else { $("#stay_alert_div").show(); $(this).prop('checked', true); isChecked = 1; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="stay_alert_checkbox" class="stayalert_checkbox"> <div id="stay_alert_div" style="display:none"> <h1>I Am in Div</h1> </div> 

Answer 2

A simple way is to use this:

  if($("#stay_alert_div").is(":visible")){
    $(this).prop("checked",false);
  }

Demo

 $(".stayalert_checkbox").click(function(){ if($("#stay_alert_div").is(":visible")){ $(this).prop("checked",false); } $("#stay_alert_div").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="stay_alert_checkbox" class="stayalert_checkbox"> <div id="stay_alert_div" style="display:none"> <h1>I Am in Div</h1> </div> 

Answer 3

I am not quite sure

 $(".stayalert_checkbox").click(function(){ if($(this).attr('checked')){ $(this).attr('checked',false).prop('value','off'); } else{ $(this).attr('checked',true).prop('value','on'); } alert($(this).val()); $("#stay_alert_div").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="stay_alert_checkbox" class="stayalert_checkbox"> <div id="stay_alert_div" style="display:none"> <h1>I Am in Div</h1> </div>