web-dev-qa-db-fra.com

Comment modifier la valeur de l'étiquette à l'aide de javascript

Je veux changer la valeur du libellé de '0' à 'merci' dans le libellé ci-dessous, à la case à cocher, cliquez sur l'événement.

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

Le Javascript est comme ci-dessous.

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

Mais ça ne fonctionne pas. Une idée?

javascriptlabel
5
Sheikh Siddiquee

Vous prenez name dans document.getElementById() Votre cb devrait être txt206451 (Attribut ID) et non pas un attribut name. 

Ou 

Vous pouvez l'avoir par document.getElementsByName()

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

OU

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

Et pour définir des valeurs dans l'utilisation cachée document.getElementsByName() like suivant

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

Démo Fiddle

3
Dhaval Marthak

très simple 

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

Cela fonctionnera dans 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'

Mais après avoir regardé, labels ne semble pas être largement supporté ..

Vous pouvez utiliser querySelector

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

Sur la base de votre code, j'ai créé ce Fiddle
Vous devez utiliser 

var cb = document.getElementsByName('field206451')[0];
var label = document.getElementsByName('label206451')[0];


si vous voulez utiliser les attributs de nom, vous devez prendre l’index car il s’agit d’une liste d’éléments, et pas seulement d’un seul. Tout le reste a bien fonctionné.

0
JasonWilczak

Essayer 

utilisez une variable id pour le champ masqué et utilisez l'identifiant checkbox en javascript.

et changez le ClientIDMode="static" aussi

<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>
0
Sajad Karuthedath