Im having 2 issue in reset radio button and check.

1 st Issue.

• I check or select the (1st row) radio button through this buttons Check Option 1, Check Option 2, Check Option 3

• Its working fine for 1st time only, For example if i click the button Check Option 1, Check Option 2, Check Option 3 it will check radio button correctly according to its value.

• If again i click the button Check Option 1, Check Option 2, Check Option 3 its not working.

2 nd Issue.

• I need to reset to its default checked value by clicking Reset button. For example see 2nd row.

• Reset is not working if i checked it through Check Option 1, Check Option 2, Check Option 3. If i checked through manually its working fine.

• But im using $('input[name=rdoSample][value=' + value.Rdovalue + ']').attr('checked', 'checked'); because im getting value from database and i have to check according to its value.

  FIDDLE DEMO

  <title>Testing</title>
  <script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  
      $(document).ready(function() {
  
          $('#btnReset').click(function() {
              $('input[type=radio]').prop('checked', function() {
                  return this.getAttribute('checked') == 'checked';
              });
          });
  
          $('#btnCheck1').click(function() {
              $('input[name=rdoSample][value="a"]').attr('checked', 'checked');
  
          });
  
          $('#btnCheck2').click(function() {
              $('input[name=rdoSample][value="b"]').attr('checked', 'checked');
          });
  
          $('#btnCheck3').click(function() {
              $('input[name=rdoSample][value="c"]').attr('checked', 'checked');
          });
  
      });
  
  </script>
  

  <div>
      <table cellpadding="0" cellspacing="0" border="1">
          <tr>
              <td>
                  1)
              </td>
              <td>
                  <input type="radio" name="rdoSample" value="a" checked="checked" />
                  a
                  <input type="radio" name="rdoSample" value="b" />
                  b
                  <input type="radio" name="rdoSample" value="c" />
                  c
              </td>
              <td>
                  <input type="button" value="Check Option 1" id="btnCheck1" />
                  <input type="button" value="Check Option 2" id="btnCheck2" />
                  <input type="button" value="Check Option 3" id="btnCheck3" />
              </td>
          </tr>
          <tr>
              <td>
                  2)
              </td>
              <td>
                  <input type="radio" name="rdoSample1" value="11" checked="checked" />
                  11
                  <input type="radio" name="rdoSample1" value="22" />
                  22
                  <input type="radio" name="rdoSample1" value="33" />
                  33
              </td>
          </tr>
          <tr>
              <td colspan="3" align="center">
                  <input type="button" value="Reset" id="btnReset" />
              </td>
          </tr>
      </table>
  </div>
  

Im having 2 issue in reset radio button and check.

1 st Issue.

• I check or select the (1st row) radio button through this buttons Check Option 1, Check Option 2, Check Option 3

• Its working fine for 1st time only, For example if i click the button Check Option 1, Check Option 2, Check Option 3 it will check radio button correctly according to its value.

• If again i click the button Check Option 1, Check Option 2, Check Option 3 its not working.

2 nd Issue.

• I need to reset to its default checked value by clicking Reset button. For example see 2nd row.

• Reset is not working if i checked it through Check Option 1, Check Option 2, Check Option 3. If i checked through manually its working fine.

• But im using $('input[name=rdoSample][value=' + value.Rdovalue + ']').attr('checked', 'checked'); because im getting value from database and i have to check according to its value.

  FIDDLE DEMO

  <title>Testing</title>
  <script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  
      $(document).ready(function() {
  
          $('#btnReset').click(function() {
              $('input[type=radio]').prop('checked', function() {
                  return this.getAttribute('checked') == 'checked';
              });
          });
  
          $('#btnCheck1').click(function() {
              $('input[name=rdoSample][value="a"]').attr('checked', 'checked');
  
          });
  
          $('#btnCheck2').click(function() {
              $('input[name=rdoSample][value="b"]').attr('checked', 'checked');
          });
  
          $('#btnCheck3').click(function() {
              $('input[name=rdoSample][value="c"]').attr('checked', 'checked');
          });
  
      });
  
  </script>
  

  <div>
      <table cellpadding="0" cellspacing="0" border="1">
          <tr>
              <td>
                  1)
              </td>
              <td>
                  <input type="radio" name="rdoSample" value="a" checked="checked" />
                  a
                  <input type="radio" name="rdoSample" value="b" />
                  b
                  <input type="radio" name="rdoSample" value="c" />
                  c
              </td>
              <td>
                  <input type="button" value="Check Option 1" id="btnCheck1" />
                  <input type="button" value="Check Option 2" id="btnCheck2" />
                  <input type="button" value="Check Option 3" id="btnCheck3" />
              </td>
          </tr>
          <tr>
              <td>
                  2)
              </td>
              <td>
                  <input type="radio" name="rdoSample1" value="11" checked="checked" />
                  11
                  <input type="radio" name="rdoSample1" value="22" />
                  22
                  <input type="radio" name="rdoSample1" value="33" />
                  33
              </td>
          </tr>
          <tr>
              <td colspan="3" align="center">
                  <input type="button" value="Reset" id="btnReset" />
              </td>
          </tr>
      </table>
  </div>
  

• javascript
• jquery
• radio-button
• reset

2 Answers 2

use prop instead of attr to change the checked property like this.

$('input[name=rdoSample][value="a"]').prop('checked', 'checked');

Js Fiddle

You should replace .attr("checked",... with .prop("checked,....

There is a difference between an attribute and a property. Quoting the jQuery docs:

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.

So, using something like this, would make everything work:

$("input[name=<name>][value=<value>]").prop(
        "checked", true);

See, also, this short demo.