[英]Change innerhtml of label when radio button is checked
I want to add innerhtml to my label, when a radio button is checked. 当选中单选按钮时,我想将innerhtml添加到标签中。 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"
因此,值1的标签应为:“标签1”
Label for value 2 should be "Label 2" etc. 值2的标签应为“标签2”等。
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: 这是我当前的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>
Try solution acc. 尝试解决方案。 to you.
给你。
You can combile "Label" as string to rvalue variable. 您可以将“ Label”作为字符串编译为右值变量。 ie
var rvalue="Label"+$(this).attr('value');
即
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/ 工作示例: http : //jsfiddle.net/7wLbyn2c/4/
<input type="radio" onClick="getInnerHtml($(this))">
// call getInnerHtml function in all radio buttons and then write the function
function getInnerHtml(thisVal) {
alert(thisVal.innerHtml());
}
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. 我们只是将对这个特定单选按钮的引用作为参数传递给onclick事件函数,然后仅使用javascript中使用的
.value
属性。 You can also use onchange
event. 您还可以使用
onchange
事件。
Edited 已编辑
function getvalue(ref) {
for(i=ref.value;i<=5;i++)
{
$(this).next('label').appned(i);
}
}
Try this 尝试这个
$('input:radio').click(function() {
$('label').text('');
$(this).next('label').html('Label '+$(this).attr('value'));
});
http://jsfiddle.net/nm8ha2p9/1/ http://jsfiddle.net/nm8ha2p9/1/
Well I did something with pure JS. 好吧,我做了一些纯JS。 I hope it helps you.
希望对您有帮助。 It's on codepen .
在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="";
}
}
Using pure JS, no jQuery. 使用纯JS,没有jQuery。
Labels are set in your HTML, so you can easily have whatever you want. 标签是在HTML中设置的,因此您可以轻松拥有所需的内容。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.