CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user9186735
user9186735

Reputation:

Change Radio Button To Checked Or Unchecked Using Jquery

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

Upvotes: 0

Views: 2325

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 1

Nikhil Ghuse
Nikhil Ghuse

Reputation: 1288

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>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

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>

Upvotes: 1

Related Questions