使用 onChange for 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
    }

如何获取单选按钮的值？

原文由 BlueCat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我知道了。很简单。只是在括号中添加了“值”：

 <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

原文由 BlueCat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一种可能的方法是将 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 ）。

原文由 raina77ow 发布，翻译遵循 CC BY-SA 3.0 许可协议