使用onChange获取javascript函数的单选按钮的值答案

【问题标题】：Get value of radio button with onChange for javascript function使用onChange获取javascript函数的单选按钮的值
【发布时间】：2018-01-17 19:40:26
【问题描述】：

我有一些单选按钮，我想通过 onChange 为我的函数获取它们的值。

<input type="radio" name="rating" value="1" onchange="getRating(???)> 1
<input type="radio" name="rating" value="2" onchange="getRating(???)> 2
<input type="radio" name="rating" value="3" onchange="getRating(???)> 3

我的功能：

function getRating(ratingValue) {
     $.ajax({
          url: '/Rating/Create',
          type: "POST",
          data: {rating: ratingValue.value },
     success: function (data) {
          //Successmessage
          console.log(ratingValue);
     },
     error: function (xhr) {
          //Errormessage
    }

如何获取单选按钮的值？

【问题讨论】：

@EleazarEnrique 好吧，我不应该用 jQuery 来做，我的老师希望我将单选按钮的值作为函数的属性。所以我需要把值放在这里：getRating(here)
对不起，你是对的。我没有意识到！

标签： javascript html radio-button onchange

【解决方案1】：

一种可能的方法是将this（触发事件的元素）作为参数传递给getRating。像这样：

function getRating(el) {
  console.log(el.value);
}

<input type="radio" name="rating" value="1" onchange="getRating(this)"> 1
<input type="radio" name="rating" value="2" onchange="getRating(this)"> 2
<input type="radio" name="rating" value="3" onchange="getRating(this)"> 3

作为替代方案，您可以将元素的值直接传递给函数：

HTML

<input type="radio" name="rating" value="1" onchange="getRating(value)" /> 1

<!-- and so on -->

JS

function getRating(ratingValue) {
  // process the given value
}

... 使用 EventHandler 的词法环境 contains element itself（因此其属性可直接访问，无需显式引用 this）这一事实。

【讨论】：

好像你刚刚发布了这个答案，而我发现了问题所在，但无论如何谢谢:)我之前尝试过“this”，但后来我得到了输入元素作为值

【解决方案2】：

只需使用事件监听器：

$(document).on('click', 'input[name="rating"]', function() {
    alert($(this).val());
});

JSFiddle： https://jsfiddle.net/59uquvfz/5/

【讨论】：

【解决方案3】：

我明白了。很简单。刚刚在括号中添加了“价值”：

<input type="radio" name="rating" value="1" onchange="getRating(value)> 1
<input type="radio" name="rating" value="2" onchange="getRating(value)> 2
<input type="radio" name="rating" value="3" onchange="getRating(value)> 3

【讨论】：