change radio button check status using JQuery

Question

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

Milind Anantwar · Accepted Answer · 2018-09-06 09:41:53Z

1

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

edited Sep 6, 2018 at 9:41

answered Sep 6, 2018 at 9:36

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Haydeer Hussien Over a year ago

its still the same (working for one time until i refresh the page)

Rory McCrossan Over a year ago

In which case, check the console for errors elsewhere in your JS as this works absolutely fine, and is the best approach: jsfiddle.net/fr5cgwuh

fdomn-m Over a year ago

@RoryMcCrossan this answer was changed to use .prop after OPs comment that it didn't work (as it still used .attr).

Jana · Accepted Answer · 2018-09-06 10:09:24Z

1

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

edited Sep 6, 2018 at 10:09

answered Sep 6, 2018 at 9:48

Jana

112 bronze badges

2 Comments

fdomn-m Over a year ago

Not sure about the .length change, but .prop was the fix required.

Jana Over a year ago

Updated code ,Use keyup function and parseInt for numeric validation

Mehta Harshit · Accepted Answer · 2018-09-06 09:38:15Z

0

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

answered Sep 6, 2018 at 9:38

Mehta Harshit

1407 bronze badges

1 Comment

Haydeer Hussien Over a year ago

its solve the problem, I must use prop instead of $('input:radio[id="RadioBtn1"]').prop("checked", true); thanks

fdomn-m · Accepted Answer · 2018-09-06 09:48:34Z

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

thanks for help, that's right I should use .prop instead of .attr

Marco Messina · Accepted Answer · 2018-09-06 09:59:18Z

0

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

answered Sep 6, 2018 at 9:59

Marco Messina

1041 silver badge6 bronze badges

Comments

Sagar Shinde · Accepted Answer · 2018-09-06 10:07:53Z

0

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

answered Sep 6, 2018 at 10:07

Sagar Shinde

15011 bronze badges

Collectives™ on Stack Overflow

change radio button check status using JQuery

6 Answers 6

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related