CODEWITHSUNDEEP
javascriptjqueryhtml
Haydeer Hussien
Haydeer Hussien

Reputation: 19

change radio button check status using JQuery

I have two radio buttons with one input text, when I insert value more than 12 it will automatically check RadioBtn2 otherwise it will check RadioBtn1

It works OK but when I return to textbox and change the value again it not working until I refresh the page

$(function() {
  $('#field222').change(function() {
    var text_value = $("#field222").val();
    if (text_value >= '12') {
      $('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
    } else {
      $('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' >Secend

Upvotes: 0

Views: 436

Answers (6)

Jana
Jana

Reputation: 11

Try the code with keypress function and prop for radio button check.

$(function() {
  $('#field222').keyup(function() {
    var text_value = parseInt($("#field222").val());

    if (text_value >=12) {

      $('input:radio[id="RadioBtn1"]').prop("checked", true);
    } else {
      $('input:radio[id="RadioBtn2"]').prop("checked", true);
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='integer' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' checked>Secend
 Run code

Upvotes: 1

Sagar Shinde
Sagar Shinde

Reputation: 160

I have seen one issue in above example that you are taking integer value and trying to compare with string.

Instead of 

 if (text_value >= '12') {    
  $('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
} else {
  $('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
}

Use

if (text_value >= 12) {
$("input[id='RadioBtn1']").prop("checked", true);

} else {
$("input[id='RadioBtn2']").prop("checked", true);

[See Working Demo](https://jsfiddle.net/HuZcM/1137/ )

Upvotes: 0

Marco Messina
Marco Messina

Reputation: 104

$(function() {
  $('#field222').keyup(function() {
    var text_value = $("#field222").val();
    if (text_value >= 12) {
      $('#RadioBtn2').prop('checked', true);
    } else {
      $('#RadioBtn1').prop('checked', true); 
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' >Secend

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

when I return to textbox and change the value again it not working

this is because you are using .attr when you should be using .prop. Essentially, the 2nd radio's .attr is always set and because you can only have one checked, the browser shows the second as checked.

It works fine if you use .prop or if you use .removeAttr before setting it again. 

$(function() {
  $('#field222').change(function() {
    var text_value = $("#field222").val();
    if (text_value >= '12') {    
      $('input:radio[id="RadioBtn2"]').prop('checked', 'checked');
    } else {
      $('input:radio[id="RadioBtn1"]').prop('checked', 'checked');
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option2' >Secend

$(function() {
  $('#field222').change(function() {
    var text_value = $("#field222").val();
    $('input:radio').removeAttr("checked");
    if (text_value >= '12') {    
      $('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
    } else {
      $('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option2' >Secend

You will also need to parse the value to an int if you want to check it numerically, but it works with strings as-is (use "0" and "12" to show it working).

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

That's because you have incorrect condition in if statemenet. You need to parse the value to integer before making greater than check.

You also need to change change event to keyup and set property checked as true:

var text_value = parseInt($("#field222").val());
if (text_value >= 12) {
  $('input:radio[id="RadioBtn1"]').prop("checked", true);
} else {
  $('input:radio[id="RadioBtn2"]').prop("checked", true);
}


$(function() {
  $('#field222').keyup(function() {
    var text_value = parseInt($("#field222").val());
     debugger;
     if (text_value >= 12) {
       $('input:radio[id="RadioBtn1"]').prop("checked", true);
     } else {
       $('input:radio[id="RadioBtn2"]').prop("checked", true);
     }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' checked>Secend

Upvotes: 1

Mehta Harshit
Mehta Harshit

Reputation: 140

Parse the value and if condition like this

For versions of jQuery equal or above (>=) 1.6, use:

var text_value = parseInt($("#field222").val());
if (text_value >= 12) {
  $('#RadioBtn1').prop("checked", true);
} else {
  $('#RadioBtn2').prop("checked", true);
}

Upvotes: 0

Related Questions