获取动态定义的选中单选按钮的属性

Get properties of dynamically-defined, checked radio button

本文关键字：单选按钮 属性 定义 获取 动态      更新时间：2023-09-26

有很多类似的问题，但我仍然不明白。

我有一组动态定义的单选按钮(按钮的数量和它们的标签都在变化)。

我只需要获得与选中的单选按钮相关联的标签和数字。我该怎么做呢?

我做了一个JS小提琴显示，当我点击任何按钮，选中的单选是"未定义"。下面是代码:

$(document).ready(function() {
  var myArray = ["never", "sometimes", "always"];
  for (i = 0; i < myArray.length; i++) {
    addradiobutton("radio", i + 1, label = myArray[i]);
  }
  function addradiobutton(type, number, text) {
    var label = document.createElement("label");
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", number);
    element.setAttribute("name", type);
    element.setAttribute("id", "radio_" + number);
    label.appendChild(element);
    label.innerHTML += text;
    var foo = document.getElementById("questionAnswerRadio");
    //Append the element in page (in span).
    foo.appendChild(label);
  }
  $("#questionAnswerRadio").click(function(event) {
    var currentSlideResult = 0;
    currentSlideResult.answerChosen = $("#questionAnswerRadio :radio:checked + label").text();
    currentSlideResult.numberChosen = $("#questionAnswerRadio :radio:checked + value").text();
    alert(currentSlideResult.answerChosen)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questionAnswerRadio"></div>

  1. 在事件处理程序中使用$(this)来获取所单击的单选按钮的值和标签
  2. 将空对象分配给变量currentSlideResult
  3. 使用$(this).parent().text()
    4. 获取与单选按钮关联的标签
  4. 使用change事件代替click
  5. 你可以直接将数组元素传递给函数，不需要将它赋值给变量，然后再传递变量
  6. 创建新元素和附加元素，你可以使用jQuery

$(document).ready(function() {
  var myArray = ["never", "sometimes", "always"];
  for (i = 0; i < myArray.length; i++) {
    addradiobutton("radio", i + 1, myArray[i]);
  }
  function addradiobutton(type, number, text) {
    var input = $('<input />')
      .attr({
        type: type,
        value: number,
        name: type,
        id: 'radio_' + number
      });
    $('<label />')
      .text(text)
      .prepend(input)
      .appendTo('#questionAnswerRadio');
  }
  $("#questionAnswerRadio").on('change', ':radio', function(event) {
    var currentSlideResult = {};
    currentSlideResult.answerChosen = $(this).parent().text();
    currentSlideResult.numberChosen = $(this).val();
    alert(currentSlideResult.answerChosen);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questionAnswerRadio"></div>

相关文章：