Question

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

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

我用它来评定星级，所以当选中下一个单选按钮时，它应该删除前一个标签的值。

这是我目前的html：

<ul class="rating">
  <li>
    <span class="ratingSelector">
      <input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
      <label class="full" for="Degelijkheid-1-5"></label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
      <label class="full" for="Degelijkheid-2-5"></label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
      <label class="full" for="Degelijkheid-3-5"></label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
      <label class="full" for="Degelijkheid-4-5"></label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
      <label class="full" for="Degelijkheid-5-5"></label>
    </span>
  </li>
  <li>
    <span class="ratingSelector">
      <input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
      <label class="full" for="Design-1-5"></label>
      <input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
      <label class="full" for="Design-2-5"></label>
      <input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
      <label class="full" for="Design-3-5"></label>
      <input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
      <label class="full" for="Design-4-5"></label>
      <input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
      <label class="full" for="Design-5-5"></label>
    </span>
  </li>
</ul>

Answer 1

尝试使用解决方案。给你。

你可以组合＆＃34;标签＆＃34;作为rvalue变量的字符串。即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);
    });

工作示例：http://jsfiddle.net/7wLbyn2c/4/

Answer 2

<input type="radio" onClick="getInnerHtml($(this))">
// call getInnerHtml function in all radio buttons and then write the function

function getInnerHtml(thisVal) {
   alert(thisVal.innerHtml());
}

Answer 3

使用以下代码

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

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

我们只是将对该特定单选按钮的引用作为参数传递给onclick事件函数，然后简单地使用javascript中使用的.value属性。您还可以使用onchange事件。

<强>被修改

function getvalue(ref) {
       for(i=ref.value;i<=5;i++)
       {
       $(this).next('label').appned(i);
       }
    }

Answer 4

试试这个

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

http://jsfiddle.net/nm8ha2p9/1/

Answer 5

我用纯JS做了一些事情。我希望它对你有所帮助。它在codepen上。这是我使用的功能：

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="";
  }
}

Answer 6

使用纯JS，没有jQuery。

标签已在您的HTML中设置，因此您可以轻松拥有自己想要的任何内容。

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

使用委托事件监听器，监听点击以冒泡。

＆＃13;

[].forEach.call(document.querySelectorAll('.ratingSelector'), function (node) {
    var labels = node.querySelectorAll('.full');

    node.addEventListener('click', function (evt) {
        var target = evt.target;

        if (target.classList.contains('radio')) {
            [].forEach.call(labels, function (label) {
                label.classList.add('hidden');
            });

            evt.target.nextElementSibling.classList.remove('hidden');
        }
    }, false);
});

＆＃13;

.hidden {
    display:none
}

＆＃13;

<ul class="rating">
  <li>
    <span class="ratingSelector">
      <input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
      <label class="full hidden" for="Degelijkheid-1-5">Label 1</label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
      <label class="full hidden" for="Degelijkheid-2-5">Label 2</label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
      <label class="full hidden" for="Degelijkheid-3-5">Label 3</label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
      <label class="full hidden" for="Degelijkheid-4-5">Label 4</label>
      <input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
      <label class="full hidden" for="Degelijkheid-5-5">Label 5</label>
    </span>
  </li>
  <li>
    <span class="ratingSelector">
      <input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
      <label class="full hidden" for="Design-1-5">Label 1</label>
      <input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
      <label class="full hidden" for="Design-2-5">Label 2</label>
      <input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
      <label class="full hidden" for="Design-3-5">Label 3</label>
      <input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
      <label class="full hidden" for="Design-4-5">Label 4</label>
      <input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
      <label class="full hidden" for="Design-5-5">Label 5</label>
    </span>
  </li>
</ul>

＆＃13;

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

6 个答案: