Change innerhtml of label when radio button is checked

Question

I want to add innerhtml to my label, when a radio button is checked. By default the label does not have any value.

I want to change the value of the label based on the value of the radio button.
But I want to define my own value for this. So the label for value 1 should be: "Label 1"
Label for value 2 should be "Label 2" etc.

I use this for star rating, so when a next radio button is checked, it should remove the value of the previous label.

This is my current 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

Try solution acc. to you.

You can combile "Label" as string to rvalue variable. ie var rvalue="Label"+$(this).attr('value');

like as:

$('.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);
    });

Working example: 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

use the below code

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

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

We are just passing the reference to this particular radio button as parameter in the onclick event function and then simply use .value attribute used in javascript. You can also use onchange event.

Edited

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

Answer 4

Try this

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

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

Answer 5

Well I did something with pure JS. I hope it helps you. It's on codepen . This are functions I used:

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

Using pure JS, no jQuery.

Labels are set in your HTML, so you can easily have whatever you want.

Labels use a class to hide them when not wanted.

Uses delegated event listener, listening for click to bubble.

 [].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); }); 

 .hidden { display:none } 

 <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>