JQuery'de onay kutusu değerleri nasıl alınır

240

İşaretli onay kutularının değerlerini almak ve hemen bir textarea içine koymak için jQuery nasıl kullanılır ?

Tıpkı bu kod gibi:

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

Eğer id="c_d"tarafından güncellenen Ajax , altCognito kodunun altında çalışmaz. İyi bir çözüm var mı?

jquery html checkbox

— lanqy
kaynak

hepsini mi bir tane mi istedin?

— TStamper

Belirli bir değer / etiketle kutuyu nasıl 'kontrol edebiliriz'? "one_name2" mi diyorsun?

— Amitd

5

@Amitd $ ("girdi [ad = bir_adı2]") kullanır.

— Mark Schultheiss

teşekkürler güzel çalıştı ... radyo türü için bile. 1 oy yukarı :)

— Amitd

320

İşte işe yarıyor ( örneğe bakın ):

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

Güncelleme

Birkaç ay sonra kimlik değiştiğinde yukarıdakilerin nasıl çalışacağı konusunda başka bir soru soruldu. Çözüm, updateTextArea işlevini CSS sınıflarını kullanan genel bir şeye eşlemek ve bu değişiklikler için DOM'u izlemek için canlı işlevi kullanmak üzere kaynar.

— CGP
kaynak

2

Ah ha! Mükemmel. Her iki olası senaryoyu da dikkate aldınız. İyi iş efendim. ;)

— KyleFarris

Belirli bir değer / etiketle kutuyu nasıl 'kontrol edebiliriz'? "one_name2" mi diyorsun?

— Amitd

6

Bu gibi şeyler için harita kullanmayı seviyorum: $ (': işaretli', '#c_b'). Harita (işlev (i, cb) {return cb.value}) .get (). Ayrıca, bu sadece kişisel tercihtir, ancak metin alanlarını değiştirmekten değerleri almaktan ayrı olurdum: $ (function () {$ ('# c_b input'). Tıklayın ($ ('# t'). Val. ($ (': işaretli', '#c_b'). harita (işlev (i, cb) {return cb.value}) .get ())); $ ('# c_b girişi: ilk'). triggerHandler (' Tıklayın'); });

— Brandon

kullanmak $(document).on("click", "#c_b input", updateTextArea);ajax'y sorunları çevresinden dolaşmak için.

— Goldentoa11

1

Bu sadece IE (11) olup olmadığından emin değil, ama olmamalıdır $('#c_b:checked')(aralık vurgu)?

— AceMark

124

Seçilen tüm onay kutuları değerini virgülle ayrılmış dizede de döndürebilirsiniz. Bu, SQL'e parametre olarak gönderdiğinizde de sizin için daha kolay olacaktır

Burada, virgülle ayrı dizede "chkboxName" adına sahip tüm seçili onay kutuları değerlerini döndüren bir örnek verilmiştir

Ve işte javascript

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

İşte HTML örneği

<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
kaynak

Belirli bir adın işaretli onay kutularının tüm değerlerini almanın bir yolunu ararken bunun üzerine tökezledim ve iki küçük sorunla benim için çalışıyor. 1) İlk kutudan başka bir kutuyu her işaretlediğimde, ilk kutudaki onay işaretini değiştirir. 2) Daha sonra bilgilere erişebilmek için bunu bir diziye ayarlamaya çalıştığımda çöküyor.

— Başrahibe Kabarcıklar

3

Bu dürüstçe en iyi cevaptır. Çok basit. Ben "fonksiyonu" ve "uyarı" bazı insanlar karıştırır gibi kaldırılır, Ama kod basit, aferin.

— tmarois

showSelectedValues ayrıca aynı ada sahip radyo düğmesi gruplarının kodunu çözmek için de çalışır

— Matthew Lock

65

Sorunuz oldukça belirsiz ama bence ihtiyacınız olan şey bu:

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

Edit: Oh, tamam .. işte gidiyorsun ... Daha önce HTML yoktu. Her neyse, evet, değeri tıklandığında bir metin alanına koymak istediğinizi düşündüm. İşaretli onay kutularının değerlerinin sayfa yüküne (belki de güzel bir virgülle ayırma ile) sayfa yüklenmesine konmasını istiyorsanız, bu kadar basit olacaktır:

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

Düzenle 2 İnsanlar yaptıkça, yazdığım uzun seçiciyi kısaltmak için de bunu yapabilirsiniz:

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

... bu kısayolu tamamen unuttum. ;)

— KyleFarris
kaynak

50

Bu benim için mükemmel çalışıyor:

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

Teşekkürler Mohamed ElSheikh

— Nic
kaynak

1

serin adam ... bu benim ajax döngü için çalıştı sadece biri;) teşekkürler

— Sagive SEO

7

. Ayrıca $ ( 'girişi [adı = seçimi]: kontrol') bir haritada (fonksiyonu () {this.value dönüş;}) ToArray ().

— ygaradon

8

Teşekkürler altCognito, çözümünüz yardımcı oldu. Bunu, onay kutularının adını kullanarak da yapabiliriz:

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
kaynak

6

Aşağıdakiler faydalı olabilir, çünkü buraya biraz farklı bir çözüm arıyorum. Komut dosyamın giriş öğeleri arasında otomatik olarak döngü oluşturması gerekiyordu ve değerlerini döndürmek zorunda kaldı (jQuery.post () işlevi için), sorun, işaretli durumdan bağımsız olarak değerlerini döndüren onay kutuları ile ilgili. Bu benim çözümümdü:

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

Kullanımı:

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

Belirtilen giriş alanı bir onay kutusuysa, input_val işlevi yalnızca işaretliyse bir değer döndürür. Diğer tüm elemanlar için, kontrol edilen durumdan bağımsız olarak değer döndürülür.

— Andy
kaynak

gerçekten iyi çalışıyor, çok teşekkürler ... Ben sadece "dönüş jQuery (this) .val ();" "doğru dön"; çünkü benim durumumda bir onay kutusu sadece kontrol olup olmadığını bilmek gerekir .. teşekkürler!

— TCB13

5

Değeri bir değişkene kaydetmeniz gerektiğinde bir alternatif:

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

(map (), textarea'daki metinden daha kullanışlı bulduğum bir dizi döndürür).

— PGCD
kaynak

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

Çok fazla karmaşıklaştın. Ayrıca, genellikle değer parametresiyle bir metin alanının değerini ayarlamazsınız - bir metin kutusunun değeri innerHTML'dir. Ve bir öğenin değerini ayarlayacak olsaydınız, normalde tarayıcı soyutlama amacıyla 'val ()' yöntemini kullanmak en iyisidir.

— 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
kaynak

2

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

— mkoryak
kaynak

1

Aynı anda birden fazla onay kutusu işaretlenebilir.

— KyleFarris

2

Her neyse, muhtemelen böyle bir şeye ihtiyacınız var:

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

Bu, sayfadaki ilk işaretli onay kutusunun değerini alır ve ile birlikte metin alanına ekler id='textarea'.

Örnek kodunuzda onay kutularını bir forma koymanız gerektiğini unutmayın.

— Pim Jager
kaynak

2

Bu yanlıştır, isbir boolean değeri döndürür, bir boolean değerinin valyöntemi yoktur.

— undefined

2

Başka bir gönderinin cevabını kullanarak, aynı şeyi yapmak için kullandığım çok daha kolay ve kısa bir yol şöyle:

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

Başlangıçta şehirler bir MySQL veritabanından alınır ve döngü sırasında PHP'de döngüye alınır:

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 } ?>

Şimdi, yukarıdaki jQuery kodunu kullanarak, tüm city_id değerlerini almak ve $ .get (...) kullanarak veritabanına geri göndermek

Bu benim hayatımı çok kolaylaştırdı çünkü kod tamamen dinamik. Daha fazla şehir eklemek için tek yapmam gereken veritabanımda daha fazla şehir eklemek ve PHP veya jQuery ucunda endişelenmemek.

— zeeshan
kaynak

0

Ben benzer bir sorun vardı ve bu nasıl yukarıdaki örnekleri kullanarak çözüldü:

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

— Sam
kaynak

0

Bunu dene..

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
kaynak

0

Herhangi bir onay kutusunun değerini işaretli olarak derhal eklemek istiyorsanız, bunun sizin için çalışması gerekir:

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

— duckyflip
kaynak

Birden fazla değeri ve onay kutusundaki işaretleri kaldırmaz

— Rob