使用onChange获取Javascript函数的单选按钮的值

Question

我有一些单选按钮，我想通过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
    }

如何获取单选按钮的值？

Answer 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的词法环境包含元素本身的事实（因此，可以直接访问其属性，而无需显式引用this）。