Javascript 选中单选按钮时更改标签的innerhtml

当选中单选按钮时，我想将innerhtml添加到标签中。 默认情况下，标签没有任何值

我想根据单选按钮的值更改标签的值。
但是我想为这个定义我自己的价值。 因此，值1的标签应该是：“标签1”
值2的标签应为“标签2”等

我用它来表示星级，所以当选中下一个单选按钮时，它应该删除上一个标签的值

这是我当前的html：

//在所有单选按钮中调用getInnerHtml函数，然后编写该函数
函数getInnerHtml（thisVal）{
警报（thisVal.innerHtml（））；
}

尝试适合您的解决方案

您可以将“Label”作为字符串组合到右值变量。 i、 e

var rvalue=“Label”+$（this.attr（'value'）

例如：

$('.radio[name="rating[2]"]').change(function(){
    var rvalue='';
    if($(this).attr('value')=='1')
      {
        rvalue='Bad';
      }
    else if($(this).attr('value')=='5')
      {
        rvalue='Amazing';
      }

        $(this).parent('.ratingSelector').find('.full').html('');
        $(this).next('label').html(rvalue);
    });

工作示例：
使用以下代码

<input type="radio" name = 'somename' onclick="getvalue(this)">

    <script>
    function getvalue(ref) {
       alert(ref.value);
    }
    </script>

试试这个

$('input:radio').click(function() {
    $('label').text('');
   $(this).next('label').html('Label '+$(this).attr('value'));
  });

我用纯JS做了一些事情。我希望它能帮助你。正在播放。这是我使用的函数：

function setValue(obj)
{
  if(obj.checked){
    clearLabels();
    var lbls = document.getElementsByTagName("LABEL");
    var lbl = undefined;
    for(var i=0;i<lbls.length; i++)
    {
      if(lbls[i].htmlFor == obj.id)
      {
        lbl = lbls[i];
        break;
      }
    }
    if(lbl != undefined){
      lbl.innerHTML = obj.value;
    }
  }
}
function clearLabels()
{
  var lbls = document.getElementsByTagName("LABEL");
  for(var i=0;i<lbls.length;i++){
    lbls[i].innerHTML="";
  }
}

函数设置值（obj）
{
如果（对象已选中）{
clearLabels（）；
var lbls=document.getElementsByTagName（“标签”）；
var lbl=未定义；
对于使用纯JS的（var i=0；i，没有jQuery

标签是在HTML中设置的，因此您可以轻松地获得任何想要的内容

标签使用类在不需要时隐藏它们

使用委派的事件侦听器，侦听单击冒泡


[].forEach.call（document.queryselectoral（'.ratingSelector'），函数（节点）{
var labels=node.querySelectorAll（'.full'）；
node.addEventListener（'click'，函数（evt）{
var目标=evt.target；
if（target.classList.contains（'radio'））{
[]forEach.call（标签、函数（标签）{
label.classList.add（'hidden'）；
});
evt.target.nextElementSibling.classList.remove（'hidden'）；
}
}，假）；
})；
。隐藏{
显示：无
}


标签1
标签2
标签3
标签4
标签5


标签1
标签2
标签3
标签4
标签5

谢谢，但这会回显单选按钮的确切值。我需要根据输入为每个标签定义我自己的值。如果可以，请检查单选按钮值并使用开关大小写，或者根据需要分配标签html。您可以将“label”作为字符串组合到右值变量。即var rvalue=“label”+$（this）。attr（'value'）；删除所有标签html作为$（'.full'）.html（''）；根据更新的问题检查我的更新答案。谢谢！：）但是请看我的更新代码。我使用的li类不止一个，标签文本应该会影响每个单独的li类。那么我可以在代码中定义单选按钮的名称吗？这样它会影响每个li类吗？谢谢，但这会反映单选按钮的确切值。我需要根据输入为每个标签定义我自己的值。你是说s您需要将标签的值更改为单选按钮值吗？我的意思是我想在脚本中定义为5个标签中的每一个显示的文本。这样我就可以为标签1、2、3、4和5定义我自己的文本。检查我答案的编辑部分，现在您可以从单选按钮值开始设置标签值谢谢！！明白了差不多。当选中新单选按钮时，是否也可以删除以前的标签文本？谢谢，是否也可以单独而非动态地定义每个标签的文本？以便我可以定义标签的整个文本？是的，您可以使用if语句检查选项按钮的当前值，并将标签的值设置为wh随便你。
$('input:radio').click(function() {
    $('label').text('');
   $(this).next('label').html('Label '+$(this).attr('value'));
  });

function setValue(obj)
{
  if(obj.checked){
    clearLabels();
    var lbls = document.getElementsByTagName("LABEL");
    var lbl = undefined;
    for(var i=0;i<lbls.length; i++)
    {
      if(lbls[i].htmlFor == obj.id)
      {
        lbl = lbls[i];
        break;
      }
    }
    if(lbl != undefined){
      lbl.innerHTML = obj.value;
    }
  }
}
function clearLabels()
{
  var lbls = document.getElementsByTagName("LABEL");
  for(var i=0;i<lbls.length;i++){
    lbls[i].innerHTML="";
  }
}