如何使用javascript更改标签值

Question

我想在复选框点击事件中将下面标签中的标签值从'0'更改为'thanks'.

<input type="hidden" name="label206451" value="0" />
<label for="txt206451" class="swatch_text" >Chestnut Leather</label>
<input type="checkbox" name="field206451" class="swatch_check" id="txt206451" value="SELECTED"/>

Javascript如下.

var cb = document.getElementById('field206451');
var label = document.getElementById('label206451');
cb.addEventListener('click',function(evt){
    if(cb.checked){
        label.value='Thanks';
    }else{
        label.value='0';
    }
},false);

但这不起作用.任何的想法？

Answer 1

非常简单

$('#label-ID').text("label value which you want to set");

Answer 2

这将在Chrome中运行

// get your input
var input = document.getElementById('txt206451');
// get it's (first) label
var label = input.labels[0];
// change it's content
label.textContent = 'thanks'

但是看完之后，标签似乎并没有得到广泛支持。

您可以使用 querySelector

// get txt206451's (first) label
var label = document.querySelector('label[for="txt206451"]');
// change it's content
label.textContent = 'thanks'

Answer 3

你把name在document.getElementById()你的cb应该是txt206451 （ID属性）没有 name属性。

或者

你可以通过 document.getElementsByName()

var cb = document.getElementsByName('field206451')[0]; // First one

或者

var cb = document.getElementById('txt206451');

并将值设置为隐藏使用document.getElementsByName()，如下所示

var cb = document.getElementById('txt206451');
var label = document.getElementsByName('label206451')[0]; // Get the first one of index
console.log(label);
cb.addEventListener('change', function (evt) { // use change here. not neccessarily
    if (this.checked) {
        label.value = 'Thanks'
    } else {
        label.value = '0'
    }
}, false);

演示小提琴