Bagaimana cara mengubah teks tombol di jQuery?


548

Bagaimana Anda mengubah nilai teks tombol di jQuery? Saat ini, tombol saya memiliki 'Tambah' sebagai nilai teksnya, dan setelah diklik saya ingin mengubahnya menjadi 'Simpan'. Saya telah mencoba metode ini di bawah ini, tetapi sejauh ini tidak berhasil:

$("#btnAddProfile").attr('value', 'Save');

3
sebenarnya contoh Anda harus bekerja untuk mengubah nilai tombol. Saya mencobanya dan berhasil. Mungkin id tombolnya berbeda atau salah ketik.
mjspier

Masih tidak berfungsi ... mungkinkah gaya JQuery UI menyebabkan hal ini?
user517406

4
Jawaban Sergey adalah yang terbaik. itu berfungsi dengan baik pada tombol jquery tanpa menghapus gayanya, padding dan margin.
AaA

gunakan $ ini ("# btnAddProfile"). prop ('value', 'Save');
Pengembang Php

Jawaban:


899

Tergantung pada jenis tombol apa yang Anda gunakan

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6

<!-- Different button types-->

<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');

Tombol Anda juga bisa menjadi tautan. Anda harus memposting beberapa HTML untuk jawaban yang lebih spesifik.

EDIT : Ini akan bekerja dengan asumsi Anda telah membungkusnya dengan .click()panggilan, tentu saja

EDIT 2 : Versi jQuery yang lebih baru (dari> 1,6) menggunakan .propdaripada.attr

EDIT 3 : Jika Anda menggunakan jQuery UI, Anda harus menggunakan metode DaveUK (di bawah ) untuk menyesuaikan properti teks


7
Setelah berhasil menggunakan .html ('Save'), saya tidak melihat bahwa saya telah menetapkan runat = server pada tombol saya, inilah yang menyebabkan masalah.
user517406

Bagaimana saya bisa mendapatkan ini untuk bekerja dan memilikinya tidak menyusut tombol ui jquery saya?
Sevenearths

2
jangan khawatir tentang itu. Saya mengubah dari buttonke inputdan mengubah putaran ikon bukannya mengacaukan teks. (Saya kira sesuatu tidak dimaksudkan untuk menjadi)
Sevenearths

8
Saya akan menurunkan suara ini jika saya bisa, karena itu mengacaukan gaya dalam beberapa kasus. Silakan gunakan jawaban DaveUK, jika Anda memiliki masalah dengan ini . PS: Saya kira itulah yang diperhatikan oleh
Sevenearths

3
Bahkan lebih baik: gunakan jawaban dari Sergey di bawah ini untuk penggunaan jQuery dan pembuktian di masa depan: $ (".selector") .button ("option", "label", "new text");
cincodenada

148

Untuk tombol yang dibuat dengan .Tombol () di jQuery ........

Sementara jawaban lain akan mengubah teks mereka akan mengacaukan styling tombol, ternyata ketika tombol jQuery diberikan teks tombol bersarang dalam rentang misalnya

<button id="thebutton">
  <span class="ui-button-text">My Text</span>
</button>

Jika Anda menghapus rentang dan menggantinya dengan teks (seperti dalam contoh lain) - Anda akan kehilangan rentang dan format terkait.

Jadi, Anda benar-benar perlu mengubah teks di dalam tag SPAN dan BUKAN TOMBOL!

$("#thebutton span").text("My NEW Text");

atau (jika seperti saya itu dilakukan pada acara klik)

$("span", this).text("My NEW Text");

4
Anda seharusnya tidak mengharapkan struktur DOM ini untuk tidak pernah berubah. Jauh lebih baik adalah menggunakan metode jQuery-UI memberi Anda untuk mengubah label (lihat jawaban Sergey).
Mike DeSimone

80

Cara yang benar untuk mengubah teks tombol jika telah "di-tombol" menggunakan JQuery adalah dengan menggunakan metode .button ():

$( ".selector" ).button( "option", "label", "new text" );

3
Ini bekerja untuk saya lebih baik daripada pendekatan lain, yang menginjak styling tombol (khususnya ukuran tombol). Saya menggunakan tombol pada dialog UI jQuery, FWIW.
Dave Crumbacher

8
Ini adalah jawaban yang benar untuk tombol yang dibuat dengan jQuery, seperti yang ada pada dialog. Semua yang lain akan menghancurkan beberapa gaya jQuery. Ini juga melakukannya tanpa tergantung pada struktur HTML yang dihasilkan jQuery, yang lebih tahan masa depan.
cincodenada

Ini adalah jawaban yang tepat untuk pertanyaan ini (sepertinya pertanyaannya adalah tentang tombol Jquery UI, lihat komentar), itu harus dipromosikan.
peveuve

38

Untuk mengubah teks dalam sebuah tombol, cukup jalankan baris jQuery untuk

<input type='button' value='XYZ' id='btnAddProfile'>

menggunakan

$("#btnAddProfile").val('Save');

sementara untuk

<button id='btnAddProfile'>XYZ</button>

Gunakan ini

$("#btnAddProfile").html('Save');


Juga, untuk tombol yang dibuat oleh jquery menggunakan mis. $('#thing').append($("<button />")....), Anda perlu menggunakan .html untuk mengatur teks.
Benubird


22

Yang perlu Anda lakukan .button("refresh")

HTML :

<button id='btnviewdetails' type='button'>SET</button>

JS :

$('#btnviewdetails').text('Save').button("refresh");

Untuk beberapa alasan, itu hanya akan berfungsi untuk saya setelah saya menggunakan kode Anda untuk me-refresh tombol, tetapi saya juga memperhatikan bahwa ikon pada tombol (bagian dari JQuery Mobile CSS) hilang setelah menyegarkannya (meskipun solusi Anda oleh yang terdekat Saya mendapatkan).
Ciaran Gallagher

12

Jika Anda telah mengancingkan tombol Anda, ini sepertinya berfungsi:

<button id="button">First caption</button>

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);


10

Anda dapat menggunakan sesuatu seperti ini:

$('#your-button').text('New Value');

Anda juga dapat menambahkan properti tambahan seperti ini:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');

Tidak bekerja tombol input atau mengirim tombol, gunakan val ()
ActiveX

8

Kamu bisa menggunakan

$("#btnAddProfile").text('Save');

meskipun

$("#btnAddProfile").html('Save');

akan bekerja juga, tapi itu menyesatkan (itu memberi kesan Anda bisa menulis sesuatu seperti

$("#btnAddProfile").html('Save <b>now</b>');

tapi tentu saja kamu tidak bisa


6
document.getElementById('btnAddProfile').value='Save';

5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });

10
Mengulang kode yang tidak berfungsi dari pertanyaan bukanlah jawaban.
Benubird

4

itu bekerja untuk saya html:

<button type="button" class="btn btn-primary" id="btnSaveSchedule">abc</button>

js

$("#btnSaveSchedule").text("new value");

4

$(document).ready(function(){
    $(":button").click(function(){
        $("p").toggle();

    if (this.value=="Add") this.value = "Save";
    else this.value = "Add";

  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<input type='button' value='Add' id='btnAddProfile'>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>


2

Sudahkah Anda memberi kelas Anda tombol alih-alih id? coba kode berikut

$(".btnSave").attr('value', 'Save');

1
$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});

Sertakan beberapa detail tentang jawaban Anda.
Starx

harap sertakan detail dengan jawaban Anda. Saya tidak tahu apa yang Anda coba lakukan di sini.
Anurag

1

Ini harus melakukan trik:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');


0

itu benar sekali, ini bekerja untuk saya;

    $('#btnAddProfile').bind('click',function(){
    $(this).attr('value','save');
})

apakah Anda yakin Jquery tersedia dan bahwa kode Anda berada di tempat yang benar?



0

Mengubah nama etiket tombol di C #.

<button type="submit" name="add" id="btnUpdate" class="btn btn-primary" runat="server" onserverclick="btnUpdate_Click">
Add

btnUpdate.**InnerText** = "Update";
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.