Cara mengambil nilai kotak centang di jQuery

240

Bagaimana cara menggunakan jQuery untuk mendapatkan nilai kotak centang yang dicentang, dan memasukkannya ke dalam textarea segera?

Sama seperti kode ini:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Jika id="c_d"diperbarui oleh Ajax , kode altCognito di bawah ini tidak berfungsi. Apakah ada solusi yang bagus?

jquery html checkbox

— lanqy
sumber

apakah Anda ingin semua atau satu per satu?

— TStamper

Bagaimana kita bisa 'mencentang' kotak dengan nilai / label yang diberikan? katakan "one_name2"?

— Amitd

5

@Amitd gunakan $ ("input [name = one_name2]"). Attr ('dicentang', true);

— Mark Schultheiss

terima kasih itu bekerja dengan baik..bahkan untuk jenis radio. 1 suara :)

— Amitd

320

Inilah yang berfungsi ( lihat contoh ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Memperbarui

Beberapa bulan kemudian pertanyaan lain ditanyakan mengenai bagaimana cara menjaga hal di atas jika ID berubah. Nah, solusinya bermula untuk memetakan fungsi updateTextArea menjadi sesuatu yang umum yang menggunakan kelas CSS, dan menggunakan fungsi langsung untuk memantau DOM untuk perubahan tersebut.

— cgp
sumber

2

Ah ha! Luar biasa. Anda telah memperhitungkan kedua kemungkinan skenario. Kerja bagus pak. ;)

— KyleFarris

Bagaimana kita bisa 'mencentang' kotak dengan nilai / label yang diberikan? katakan "one_name2"?

— Amitd

6

Saya suka menggunakan peta untuk hal-hal seperti ini: $ (': checked', '#c_b'). Map (fungsi (i, cb) {return cb.value}) .get (). Juga, ini hanya preferensi pribadi, tapi saya akan terpisah mendapatkan nilai dari mengubah area teks, seperti: $ (function () {$ ('# c_b input') .klik ($ ('# t'). Val ($ (': checked', '#c_b'). map (fungsi (i, cb) {return cb.value}) .get ())); $ ('# c_b input: pertama'). triggerHandler (' klik ');});

— Brandon

gunakan $(document).on("click", "#c_b input", updateTextArea);sebagai gantinya untuk mengatasi masalah ajax'y.

— Goldentoa11

1

tidak yakin apakah ini hanya di IE (11), tetapi bukankah seharusnya $('#c_b:checked')(penekanan pada spasi)?

— AceMark

124

Anda juga dapat mengembalikan semua nilai kotak centang yang dipilih dalam string yang dipisah koma. Ini juga akan memudahkan Anda ketika Anda mengirimnya sebagai parameter ke SQL

Berikut adalah contoh yang mengembalikan semua nilai kotak centang yang dipilih yang memiliki nama "chkboxName" di string terpisah koma

Dan di sini adalah javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Ini adalah contoh HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

— Mohamed ElSheikh
sumber

Saya baru saja menemukan ini sambil mencari cara untuk mendapatkan semua nilai kotak centang dicentang dari nama yang diberikan dan itu bekerja untuk saya dengan dua masalah kecil. 1) setiap kali saya mencentang kotak selain yang pertama, itu mengaktifkan tanda centang di yang pertama. 2) Ketika saya mencoba mengatur ini ke array sehingga saya dapat mengakses informasi nanti, itu macet.

— Pendeta Bubbles

3

Jujur ini adalah jawaban terbaik. Sangat sederhana. Saya akan menghapus "fungsi" dan "peringatan" karena membingungkan beberapa orang, Tapi kodenya sederhana, dilakukan dengan baik.

— tmarois

showSelectedValues juga berfungsi untuk decoding grup tombol radio juga yang memiliki nama yang sama

— Matthew Lock

65

Pertanyaan Anda cukup kabur tetapi saya pikir inilah yang Anda butuhkan:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Sunting: Oh, baiklah .. ini dia ... Anda tidak memiliki HTML sebelumnya. Ngomong-ngomong, ya, saya pikir Anda bermaksud memasukkan nilai ke dalam textarea ketika diklik. Jika Anda ingin nilai kotak centang yang dicentang dimasukkan ke dalam textarea (mungkin dengan pemisahan koma yang bagus) pada pemuatan halaman, hal itu akan sesederhana:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Sunting 2 Seperti yang dilakukan orang, Anda juga dapat melakukan ini untuk memintas pemilih yang panjang yang saya tulis:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Saya benar-benar lupa tentang jalan pintas itu. ;)

— KyleFarris
sumber

50

Ini bekerja dengan baik untuk saya:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Terima kasih Mohamed ElSheikh

— Nic
sumber

1

cool man ... ini adalah satu-satunya yang bekerja untuk loop ajax saya;) terima kasih

— Sagive SEO

7

dapat juga $ ('input [nama = pilihan]: dicentang'). peta (fungsi () {return this.value;}). toArray ()

— ygaradon

8

Terima kasih altCognito, solusi Anda membantu. Kami juga dapat melakukan ini dengan menggunakan nama kotak centang:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

— Harpreet Bhatia
sumber

6

Berikut ini mungkin berguna karena saya tiba di sini mencari solusi yang sedikit berbeda. Script saya perlu untuk secara otomatis mengulang elemen input dan harus mengembalikan nilainya (untuk fungsi jQuery.post ()), masalahnya adalah dengan kotak centang mengembalikan nilainya terlepas dari status yang diperiksa. Ini solusi saya:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Pemakaian:

jQuery(".element").input_val();

Jika bidang input yang diberikan adalah kotak centang, fungsi input_val hanya mengembalikan nilai jika dicentang. Untuk semua elemen lainnya, nilainya dikembalikan terlepas dari status yang diperiksa.

— Andy
sumber

ini benar-benar berfungsi dengan baik, terima kasih banyak ... Saya baru saja mengubah "return jQuery (this) .val ();" untuk "mengembalikan true;" karena ini kotak centang dalam kasus saya, saya hanya perlu tahu apakah sudah dicentang atau tidak .. terima kasih!

— TCB13

5

Berikut adalah alternatif jika Anda perlu menyimpan nilai ke variabel:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () mengembalikan array, yang saya temukan lebih handier daripada teks dalam textarea).

— hal
sumber

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

Anda terlalu rumit. Selain itu, Anda biasanya tidak menetapkan nilai textarea dengan parameter nilai - nilai kotak teks itu adalah innerHTML. Dan jika Anda menetapkan nilai beberapa elemen, biasanya lebih baik menggunakan metode 'val ()' untuk keperluan abstraksi browser.

— KyleFarris

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

— satoru
sumber

2

$("#t").text($("#cb").find(":checked").val())

— mkoryak
sumber

1

Beberapa kotak centang dapat diperiksa sekaligus.

— KyleFarris

2

Bagaimanapun, Anda mungkin perlu sesuatu seperti ini:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Ini akan mendapatkan nilai kotak centang yang pertama kali diperiksa pada halaman dan memasukkannya ke dalam textarea id='textarea'.

Perhatikan bahwa dalam kode contoh Anda, Anda harus meletakkan kotak centang dalam formulir.

— Pim Jager
sumber

2

Ini salah, ismengembalikan nilai boolean, nilai boolean tidak memiliki valmetode.

— undefined

2

Cara yang jauh lebih mudah dan singkat yang saya gunakan untuk mencapai hal yang sama, menggunakan jawaban dari posting lain, adalah seperti ini:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Awalnya kota-kota tersebut diambil dari database MySQL, dan di-loop dalam PHP sementara loop:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Sekarang, menggunakan kode jQuery di atas, saya mendapatkan semua nilai city_id, dan mengirimkan kembali ke database menggunakan $ .get (...)

Ini telah membuat hidup saya sangat mudah karena sekarang kode ini sepenuhnya dinamis. Untuk menambah lebih banyak kota, yang perlu saya lakukan adalah menambahkan lebih banyak kota di basis data saya, dan tidak ada kekhawatiran tentang PHP atau jQuery.

— Zeeshan
sumber

0

Saya memiliki masalah serupa dan ini adalah bagaimana saya menyelesaikannya menggunakan contoh di atas:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

— sam
sumber

0

Coba yang ini..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

— sonida
sumber

0

Jika Anda ingin segera memasukkan nilai kotak centang apa pun saat sedang dicentang maka ini akan bekerja untuk Anda:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

— duckyflip
sumber

Tidak memperhitungkan beberapa nilai dan menghapus centang pada kotak centang

— Rob