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

如何获取单选按钮的值？

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 的词法环境 contains element itself 这一事实（因此它的属性可以直接访问，无需显式引用 this）。

Answer 2

我明白了。很简单。刚刚在括号中添加了"value"：

<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

Answer 3

只需使用一个事件侦听器：

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

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

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

Get value of radio button with onChange for javascript function

html

javascript

onchange

radio-button