javascript - Jquery change label text with inner input - Stack Overflow

admin管理员组

文章数量:1333428

I am novice in Jquery. I want change label text when input box is changed. I have input box with name email.

<input type="text" name="email" id="email" />

When input box is changed I want to set label text to: Send copy to my mail: [email protected]

<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
    Send copy to my mail
</label>

I have this Jquery code:

$(function () {
    $("#email").keyup(function () {
        var email = $("#email").val();
        $("label[for='sendCopy']").val('Send copy to my mail: ' + email);
    });
});

but when keyup function is triggered label is changed right, but inner input is deleted.

<label for="sendCopy">
   Send copy to my mail [email protected]
</label>

I hope you understand my problem.

I am novice in Jquery. I want change label text when input box is changed. I have input box with name email.

<input type="text" name="email" id="email" />

When input box is changed I want to set label text to: Send copy to my mail: [email protected]

<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
    Send copy to my mail
</label>

I have this Jquery code:

$(function () {
    $("#email").keyup(function () {
        var email = $("#email").val();
        $("label[for='sendCopy']").val('Send copy to my mail: ' + email);
    });
});

but when keyup function is triggered label is changed right, but inner input is deleted.

<label for="sendCopy">
   Send copy to my mail [email protected]
</label>

I hope you understand my problem.

• javascript
• jquery

Share Follow edited Aug 18, 2014 at 10:05 Jonathan Hall 79.8k1919 gold badges159159 silver badges203203 bronze badges asked Aug 18, 2014 at 9:48 Libor VymětalíkLibor Vymětalík 5311 silver badge33 bronze badges 1

• 2 input is a void element, it doesn't have closing tag. – Ram Commented Aug 18, 2014 at 9:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You could wrap the text of the label in a span to make it easier to select:

$("#email").keyup(function() {
  $('label[for="sendCopy"] span').text('Send copy to my mail: ' + $(this).val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />

<label for="sendCopy">
  <input id="sendCopy" type="checkbox" checked="" name="copy" />
  <span>Send copy to my mail</span>
</label>

Alternatively, you can keep the HTML as it is and amend the textNode directly.

$("#email").keyup(function() {
  var textNodes = $('label[for="sendCopy"]').contents().filter(function() {
    return this.nodeType == 3;
  });
  textNodes[textNodes.length - 1].nodeValue = 'Send copy to my mail: ' + $(this).val();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="email" />

<label for="sendCopy">
  <input id="sendCopy" type="checkbox" checked="" name="copy" />
  Send copy to my mail
</label>

Just change

<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
Send copy to my mail
</label>

To

<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
<label for="sendCopy">
Send copy to my mail
</label>

You are changing the contents of the label to the text, thus the input inside it is removed, the input is part of the value.

You have to put the input outside of the label, before it.

本文标签： javascriptJquery change label text with inner inputStack Overflow