如何使用javascript更改标签值

Question

我想在复选框单击事件下将标签下面的标签值从'0'更改为'谢谢'。

<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

您正在name中取document.getElementById()，您的cb应为txt206451（ID属性）不是name属性。

或

您可以在document.getElementsByName()之前拥有它

document.getElementsByName()

OR

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

并且要将值设置为隐藏，请使用var cb = document.getElementById('txt206451'); ，如下所示

document.getElementsByName()

document.getElementsByName()

Answer 2

非常简单

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

Answer 3

这将在Chrome中运行

Demo Fiddle

但是看了之后，$('#label-ID').text("label value which you want to set"); ..

---

您可以使用

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

labels doesn't seem to be widely supported

Answer 4

尝试

在隐藏字段中使用querySelector，并在javascript中使用querySelector的ID。

并且也更改

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

id

Answer 5

根据您的代码，我创建了此checkbox您需要使用

ClientIDMode="static"

如果要使用名称属性，则必须采用索引，因为它是项目列表，而不仅仅是单个项目。其他一切都很好。

Answer 6

希望这可以帮助其他人：使用innerHTML来使用标签对象。

<input type="hidden" ClientIDMode="static" id="label1" name="label206451" value="0" />

   <script type="text/javascript"> 
    var cb = document.getElementById('txt206451');
    var label = document.getElementById('label1');
    cb.addEventListener('click',function(evt){
    if(cb.checked){
        label.value='Thanks'
    }else{
        label.value='0'
    }
    },false);
    </script>