单击单选按钮时如何使用jquery从表单中获取值？

Question

我在单击单选按钮时尝试提醒用户名，但是当单击单选按钮时，第一个用户名始终会发出警报而不是关联的用户名。

结果应如下：

Jack445    - 如果点击用户的单选按钮提醒＆＃34; Jack445＆＃34;

Doe445    - 如果用户的单选按钮被点击提醒＆＃34; Doe445＆＃34;

John445    - 如果用户的单选按钮被点击警告＆＃34; John445＆＃34;

-

然而，我得到的结果如下：

Jack445    - 如果点击用户的单选按钮提醒＆＃34; Jack445＆＃34;

Doe445    - 如果点击用户的单选按钮提醒＆＃34; Jack445＆＃34;

John445    - 如果点击用户的单选按钮提醒＆＃34; Jack445＆＃34;

＆＃13;

＆＃13;

$('.star_form > .star_rating').each(function() {
  $(this).click(function() {
    alert($(this).parent().children().closest('.rated_username').val());
  });
});

＆＃13;

.stars {
  background: #ccc;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.stars .username {
  margin-bottom: 10px;
  font-size: 24px;
  font-family: Tahoma;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="user_container">
  <div class="row-fluid">
    <div class="stars" id="stars_1">
      <div class="username">Jack445</div>
      <form class="star_form" id="star_form_1" onsubmit="return false;" role="form">
        <input class="star star-5 star_rating" id="star-5" type="radio" name="star" value="5">
        <label class="star star-5" for="star-5">5</label>
        <input class="star star-4 star_rating" id="star-4" type="radio" name="star" value="4">
        <label class="star star-4" for="star-4">4</label>
        <input class="star star-3 star_rating" id="star-3" type="radio" name="star" value="3">
        <label class="star star-3" for="star-3">3</label>
        <input class="star star-2 star_rating" id="star-2" type="radio" name="star" value="2">
        <label class="star star-2" for="star-2">2</label>
        <input class="star star-1 star_rating" id="star-1" type="radio" name="star" value="1">
        <label class="star star-1" for="star-1">1</label>
        <input type="hidden" class="rated_username" value="Jack445">
      </form>
    </div>
  </div>
</div>

<div class="user_container">
  <div class="row-fluid">
    <div class="stars" id="stars_1">
      <div class="username">Doe445</div>
      <form class="star_form" id="star_form_1" onsubmit="return false;" role="form">
        <input class="star star-5 star_rating" id="star-5" type="radio" name="star" value="5">
        <label class="star star-5" for="star-5">5</label>
        <input class="star star-4 star_rating" id="star-4" type="radio" name="star" value="4">
        <label class="star star-4" for="star-4">4</label>
        <input class="star star-3 star_rating" id="star-3" type="radio" name="star" value="3">
        <label class="star star-3" for="star-3">3</label>
        <input class="star star-2 star_rating" id="star-2" type="radio" name="star" value="2">
        <label class="star star-2" for="star-2">2</label>
        <input class="star star-1 star_rating" id="star-1" type="radio" name="star" value="1">
        <label class="star star-1" for="star-1">1</label>
        <input type="hidden" class="rated_username" value="Doe445">
      </form>
    </div>
  </div>
</div>

<div class="user_container">
  <div class="row-fluid">
    <div class="stars" id="stars_1">
      <div class="username">John445</div>
      <form class="star_form" id="star_form_1" onsubmit="return false;" role="form">
        <input class="star star-5 star_rating" id="star-5" type="radio" name="star" value="5">
        <label class="star star-5" for="star-5">5</label>
        <input class="star star-4 star_rating" id="star-4" type="radio" name="star" value="4">
        <label class="star star-4" for="star-4">4</label>
        <input class="star star-3 star_rating" id="star-3" type="radio" name="star" value="3">
        <label class="star star-3" for="star-3">3</label>
        <input class="star star-2 star_rating" id="star-2" type="radio" name="star" value="2">
        <label class="star star-2" for="star-2">2</label>
        <input class="star star-1 star_rating" id="star-1" type="radio" name="star" value="1">
        <label class="star star-1" for="star-1">1</label>
        <input type="hidden" class="rated_username" value="John445">
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修复

1. ID必须是唯一的。

   修复 - 所有无线电ID加上一些div现在都有唯一的ID。

2. 一组单选按钮应共享相同的[name]属性，以便它们具有互斥关系。不要在无线电组之间共享相同的[name]。为每个广播组分配一个唯一的[name]属性进行分享。

   修复 - 为每个广播组提供唯一的[name]

3. 使用一个<form>。 <form>将收集具有[name]属性的所有表单控件的值。共享[name]的无线电组将仅具有所选单选按钮的值。

   修复 - 删除了所有<form>并在所有内容周围放置了一个<form>。

   奖励 - 提交时<form>会将表单数据发送到实时测试服务器。响应将显示在<iframe>下方。

4. jQuery逐行：

   • form#starRating将change个事件委托给每个:radio

     $('#starRating').on('change', ':radio', function(e) {
     

   • 获取已更改的:radio'的值。

     var rating = $(this).val();
     

   • 记录值（BTW使用console不要使用alert()）

     console.log(rating);
     

   • 使用类:radio查找已更改的.rated_username同级元素，并将其值存储在变量中。

     var user = $(this).siblings('.rated_username').val();
     

   • 我重复不要使用提醒（）使用console.log或console.dir

     console.log(user);
      });
     

注意：以下演示下面是一些参考资料。

演示

$('#starRating').on('change', ':radio', function(e) {
  var rating = $(this).val();
  console.log(rating);
  var user = $(this).siblings('.rated_username').val();
  console.log(user);
});

.stars {
  background: #ccc;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.stars .username {
  margin-bottom: 10px;
  font-size: 24px;
  font-family: Tahoma;
}

[type=submit] {
  float: right;
  font: inherit
}


/* For demonstration only */

.as-console-wrapper {
  max-height: 240px;
  max-width: 180px;
  transform: translate(250px, -100px);
  color: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<form id='starRating' action='https://httpbin.org/post' method='post' target='view'>
  <div class="user_container">
    <div class="row-fluid">
      <div class="stars" id="stars_1">
        <div class="username">Jack445</div>

        <input class="star star-5 star_rating" id="star-5A" type="radio" name="star1" value="5">
        <label class="star star-5" for="star-5A">5</label>
        <input class="star star-4 star_rating" id="star-4A" type="radio" name="star1" value="4">
        <label class="star star-4" for="star-4A">4</label>
        <input class="star star-3 star_rating" id="star-3A" type="radio" name="star1" value="3">
        <label class="star star-3" for="star-3A">3</label>
        <input class="star star-2 star_rating" id="star-2A" type="radio" name="star1" value="2">
        <label class="star star-2" for="star-2A">2</label>
        <input class="star star-1 star_rating" id="star-1A" type="radio" name="star1" value="1">
        <label class="star star-1" for="star-1A">1</label>
        <input type="hidden" class="rated_username" value="Jack445">

      </div>
    </div>
  </div>

  <div class="user_container">
    <div class="row-fluid">
      <div class="stars" id="stars_2">
        <div class="username">Doe445</div>

        <input class="star star-5 star_rating" id="star-5B" type="radio" name="star2" value="5">
        <label class="star star-5" for="star-5B">5</label>
        <input class="star star-4 star_rating" id="star-4B" type="radio" name="star2" value="4">
        <label class="star star-4" for="star-4B">4</label>
        <input class="star star-3 star_rating" id="star-3B" type="radio" name="star2" value="3">
        <label class="star star-3" for="star-3B">3</label>
        <input class="star star-2 star_rating" id="star-2B" type="radio" name="star2" value="2">
        <label class="star star-2" for="star-2B">2</label>
        <input class="star star-1 star_rating" id="star-1B" type="radio" name="star2" value="1">
        <label class="star star-1" for="star-1B">1</label>
        <input type="hidden" class="rated_username" value="Doe445">

      </div>
    </div>
  </div>

  <div class="user_container">
    <div class="row-fluid">
      <div class="stars" id="stars_3">
        <div class="username">John445</div>

        <input class="star star-5 star_rating" id="star-5C" type="radio" name="star3" value="5">
        <label class="star star-5" for="star-5C">5</label>
        <input class="star star-4 star_rating" id="star-4C" type="radio" name="star3" value="4">
        <label class="star star-4" for="star-4C">4</label>
        <input class="star star-3 star_rating" id="star-3C" type="radio" name="star3" value="3">
        <label class="star star-3" for="star-3C">3</label>
        <input class="star star-2 star_rating" id="star-2C" type="radio" name="star3" value="2">
        <label class="star star-2" for="star-2C">2</label>
        <input class="star star-1 star_rating" id="star-1C" type="radio" name="star3" value="1">
        <label class="star star-1" for="star-1C">1</label>
        <input type="hidden" class="rated_username" value="John445">

      </div>
    </div>
  </div>
  <input type='submit'>
  <iframe name='view' src='about:blank' width='98%'></iframe>

参考

• <强> siblings()

• <强> Defining a Radio Group

• jQuery .change() （或 .on('change'...) 事件处理程序

• jQuery :radio Selector

Answer 2

你快到了。 div没有价值观。它们包含文字。

＆＃13;

＆＃13;

$('.star_form > .star_rating').each(function() {
  $(this).click(function() {
    alert($(this).parent().parent().closest('div').find('.username').text());
  });
});

＆＃13;

.stars {
  background: #ccc;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.stars .username {
  margin-bottom: 10px;
  font-size: 24px;
  font-family: Tahoma;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="user_container">
  <div class="row-fluid">
    <div class="stars" id="stars_1">
      <div class="username">Jack445</div>
      <form class="star_form" id="star_form_1" onsubmit="return false;" role="form">
        <input class="star star-5 star_rating" id="star-5" type="radio" name="star" value="5">
        <label class="star star-5" for="star-5">5</label>
        <input class="star star-4 star_rating" id="star-4" type="radio" name="star" value="4">
        <label class="star star-4" for="star-4">4</label>
        <input class="star star-3 star_rating" id="star-3" type="radio" name="star" value="3">
        <label class="star star-3" for="star-3">3</label>
        <input class="star star-2 star_rating" id="star-2" type="radio" name="star" value="2">
        <label class="star star-2" for="star-2">2</label>
        <input class="star star-1 star_rating" id="star-1" type="radio" name="star" value="1">
        <label class="star star-1" for="star-1">1</label>
        <input type="hidden" class="rated_username" value="Jack445">
      </form>
    </div>
  </div>
</div>

<div class="user_container">
  <div class="row-fluid">
    <div class="stars" id="stars_1">
      <div class="username">Doe445</div>
      <form class="star_form" id="star_form_1" onsubmit="return false;" role="form">
        <input class="star star-5 star_rating" id="star-5" type="radio" name="star" value="5">
        <label class="star star-5" for="star-5">5</label>
        <input class="star star-4 star_rating" id="star-4" type="radio" name="star" value="4">
        <label class="star star-4" for="star-4">4</label>
        <input class="star star-3 star_rating" id="star-3" type="radio" name="star" value="3">
        <label class="star star-3" for="star-3">3</label>
        <input class="star star-2 star_rating" id="star-2" type="radio" name="star" value="2">
        <label class="star star-2" for="star-2">2</label>
        <input class="star star-1 star_rating" id="star-1" type="radio" name="star" value="1">
        <label class="star star-1" for="star-1">1</label>
        <input type="hidden" class="rated_username" value="Doe445">
      </form>
    </div>
  </div>
</div>

<div class="user_container">
  <div class="row-fluid">
    <div class="stars" id="stars_1">
      <div class="username">John445</div>
      <form class="star_form" id="star_form_1" onsubmit="return false;" role="form">
        <input class="star star-5 star_rating" id="star-5" type="radio" name="star" value="5">
        <label class="star star-5" for="star-5">5</label>
        <input class="star star-4 star_rating" id="star-4" type="radio" name="star" value="4">
        <label class="star star-4" for="star-4">4</label>
        <input class="star star-3 star_rating" id="star-3" type="radio" name="star" value="3">
        <label class="star star-3" for="star-3">3</label>
        <input class="star star-2 star_rating" id="star-2" type="radio" name="star" value="2">
        <label class="star star-2" for="star-2">2</label>
        <input class="star star-1 star_rating" id="star-1" type="radio" name="star" value="1">
        <label class="star star-1" for="star-1">1</label>
        <input type="hidden" class="rated_username" value="John445">
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;