javascript - 重置单选按钮并使用 jQuery 检查

Question

我在重置单选按钮和检查方面遇到了 2 个问题。

第 1 期。

• 我通过这个按钮检查或选择(第一行)单选按钮检查选项 1，检查选项 2，检查选项 3

• 它仅在第一次工作正常，例如，如果我单击按钮 Check Option 1, Check Option 2, Check Option 3 它将根据其值正确检查单选按钮。

• 如果我再次单击按钮检查选项 1、检查选项 2、检查选项 3，它不起作用。

第 2 期。

• 我需要通过单击 Reset 按钮 重置为默认选中值。例如，请参见第 2 行。

• 如果我通过检查选项 1、检查选项 2、检查选项 3 检查它，则重置不起作用。如果我手动检查它的工作正常。

• 但我正在使用 $('input[name=rdoSample][value=' + value.Rdovalue + ']').attr('checked', 'checked');因为我从数据库中获取值，所以我必须根据它的值进行检查。

  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>
  

Answer 1

使用 prop 而不是 attr 来像这样更改选中的属性。

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

Js Fiddle