Question

我在jQuery上相当新，所以当我从我的选择下拉列表中选择一个选项时，我试图自动更改单选框的值。但它没有按照我的计划进行。

例如：如果我从选择的选项中选择太太或女士，那么带有女性价值的收音机的属性应该成立。

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    $('[name="title"]').change(function() {
      if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
        $("#female").prop("checked", true);
      } else if ($(this).val() == "Mr.") {
        $("#male").prop("checked", true);
      }
    });
  </script>
</head>

<body>
  <select name="title">
    <option value="" disabled selected>Choose your option</option>
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>
  <label>Title</label>

  <p><b>Gender</b>
    <br/>
  </p>
  <input type="radio" name="gender" id="male">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="female">
  <label for="female">Female</label>
</body>

<html>

Answer 1

您的代码似乎是正确的。尝试使用document.ready，或将其加载到正文的末尾。

＆＃13;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
        $('[name="title"]').change(function() {
          if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
            $("#female").prop("checked", true);
          } else if ($(this).val() == "Mr.") {
            $("#male").prop("checked", true);
          }
        });
    });
  </script>
</head>

<body>
  <select name="title">
    <option value="" disabled selected>Choose your option</option>
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>
  <label>Title</label>

  <p><b>Gender</b>
    <br/>
  </p>
  <input type="radio" name="gender" id="male">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="female">
  <label for="female">Female</label>
</body>

<html>

＆＃13;

Answer 2

你错过了一个document.ready line。

this answer（这是如何使用jQuery定位单选按钮的解释），这是我使用你的代码让它在我的测试环境中工作的方式：

$(document).ready(initializePage);
function initializePage(){
  $('[name="title"]').change(function() {
      if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
        $('input:radio[name=gender]')[1].checked = true;
      } else if ($(this).val() == "Mr.") {
        $('input:radio[name=gender]')[0].checked = true;
      }
    });
}

使用jquery

2 个答案: