Bir dizideki tüm seçili onay kutularını alma


168

Bu onay kutularına sahibim:

<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />

Ve bunun gibi. Yaklaşık 6 tanesi vardır ve elle kodlanmıştır (yani bir db'den getirilmemiştir), bu yüzden bir süre aynı kalmaları muhtemeldir.

Benim sorum nasıl hepsini bir dizi (javascript) alabilirsiniz, bu yüzden onları $.postJquery kullanarak bir AJAX isteği yaparken kullanabilirsiniz .

Düşüncesi olan var mı?

Düzenleme: Yalnızca seçili onay kutularının diziye eklenmesini isterim



İken diğer soru daha yeni ve bu bir daha popüler, diğeri cevapları daha iyi, daha özlü bir koleksiyona sahiptir (burada stratejileri dahil olan, bir kaç).
Jason C

Yanıtlar:


332

Biçimlendirilmiş:

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

Umarım işe yarar.


1
ve diziden değeri kaldırmak için onay kutusunun işaretini kaldırırsanız ne yapmalısınız
Jubin Patel

@JubinPatel bu koddan önce diziyi sıfırlamanız yeterlidir. yourArray = []
RRK

11
mapeachvar yourArray = $("input:checkbox[name=type]:checked").map(function(){return $(this).val()}).get()
Dizinizi aşağıdakileri

3
function get_selected_checkboxes_array(){ var ch_list=Array(); $("input:checkbox[type=checkbox]:checked").each(function(){ch_list.push($(this).val());}); return ch_list; }
M

50
var chk_arr =  document.getElementsByName("chkRights[]");
var chklength = chk_arr.length;             

for(k=0;k< chklength;k++)
{
    chk_arr[k].checked = false;
} 

6
Yukarıdaki kodu anladığım gibi, tüm onay kutuları üzerinden yinelenir ve işaretlerini kaldırın. Bu cevap soru ile nasıl bağlantılıdır?
Terite

2
Bu, onay kutularının arasında dolaşır ve bunların işaretlerini kaldırır. Doğru cevap için VanillaJS'de lütfen aşağıdaki zahid ullah cevabına bakınız.
jmknoll

2
Bu soruya nasıl cevap veriyor? Bu, sorulanla tamamen alakasız bir şey yapar. Neden bu kadar çok oy var? Bir şey mi kaçırdım, yoksa soru onu kaldırdıktan sonra düzenlenmiş miydi?
Shubham Chaudhary

46

Saf JS

JQuery kullanmak istemeyenler için

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

5
Her zaman vanilya JS cevap seviyorum.
formicini

39

Test etmedim ama işe yaramalı

<script type="text/javascript">
var selected = new Array();

$(document).ready(function() {

  $("input:checkbox[name=type]:checked").each(function() {
       selected.push($(this).val());
  });

});

</script>

diziye değer eklemek için itin, ancak işaret kaldırıldığında ne kaldırılır?
Jubin Patel

24

Bu hile yapmalı:

$('input:checked');

Kontrol edilebilecek başka öğeleriniz olduğunu düşünmüyorum, ancak bunu yaparsanız daha spesifik hale getirmeniz gerekir:

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');

14

MooTools 1.3'te (en son yazma sırasında):

var array = [];
$$("input[type=checkbox]:checked").each(function(i){
    array.push( i.value );
});

7
Sorunun yaşının ya da çözümün doğasının önemli olduğunu fark etmedi.
LeeGee

4
Çünkü MooTools kullanarak aynı sorunun cevabını ararken bu soruyu buldum.
LeeGee

Bu cevabın jQuery ile değil MooTools 1.3 ile ilgili olduğunu unutmayın.
LeeGee

13

Bir vanilya JS kullanmak istiyorsanız, @ zahid-ullah'a benzer şekilde yapabilirsiniz, ancak bir döngüden kaçınabilirsiniz:

  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });

ES6'daki aynı kod daha iyi görünüyor:

var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);


12

Javascript'te şöyle olurdu (Demo Link) :

// get selected checkboxes
function getSelectedChbox(frm) {
  var selchbox = [];// array that will store the value of selected checkboxes
  // gets all the input tags in frm, and their number
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
  }
  return selchbox;
}   

12

ES6 sürümü:

const values = Array
  .from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);


5

Geçici değişkenlere ihtiyaç duymayan saf JavaScript:

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked")).map(e => e.value)

JS
M. Mufti

3
var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () {
        return this.value;
    }).get();

3

Kontrol edildiğinde, onay kutusu için değer ekleyin ve kontrol kaldırıldığında değeri çıkarın

$('#myDiv').change(function() {
  var values = 0.00;
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values=values+parseFloat(($(this).val()));
      // }
    });
    console.log( parseFloat(values));
  }
});
<div id="myDiv">
  <input type="checkbox" name="type" value="4.00" />
  <input type="checkbox" name="type" value="3.75" />
  <input type="checkbox" name="type" value="1.25" />
  <input type="checkbox" name="type" value="5.50" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


Lütfen cevabınıza biraz açıklama ekleyin. Saf kod yanıtları genellikle yararlı değildir.
sjaustirni

3

Bunu modern tarayıcılarda vanilya JS ile yapmanın başka bir yolu (IE desteği yok ve yazma sırasında ne yazık ki iOS Safari desteği yok) FormData.getAll () ile :

var formdata   = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question

// allchecked is ["1","3","4","5"]  -- if indeed all are checked

1

Jquery kullanma

Sadece her girdiye sınıf eklemeniz gerekir, tabii ki değiştirebilirsiniz sınıf "kaynak" eklemek var

<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />

<script type="text/javascript">
$(document).ready(function() {
    var selected_value = []; // initialize empty array 
    $(".source:checked").each(function(){
        selected_value.push($(this).val());
    });
    console.log(selected_value); //Press F12 to see all selected values
});
</script>

1

Bunu kullan:

var arr = $('input:checkbox:checked').map(function () {
  return this.value;
}).get();

0

Eklemeyi çalıştırmak için düğme tıklaması veya başka bir şey kullanırsanız zaten dizide olan değerleri eklemeyi önlemek için yorumlanmış blok komutunu kullanın

$('#myDiv').change(function() {
  var values = [];
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values.push($(this).val());
      // }
    });
    console.log(values);
  }
});
<div id="myDiv">
  <input type="checkbox" name="type" value="4" />
  <input type="checkbox" name="type" value="3" />
  <input type="checkbox" name="type" value="1" />
  <input type="checkbox" name="type" value="5" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


0

Böyle bir şey deneyebilirsiniz:

$('input[type="checkbox"]').change(function(){
       var checkedValue = $('input:checkbox:checked').map(function(){
                return this.value;
            }).get();         
            alert(checkedValue);   //display selected checkbox value     
 })

Buraya

$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function()  looping on all checkbox,

0

İşte aynı sorunu kodumu birisi de deneyebilirsiniz. jQuery

<script>
$(document).ready(function(){`
$(".check11").change(function(){
var favorite1 = [];        
$.each($("input[name='check1']:checked"), function(){                    
favorite1.push($(this).val());
document.getElementById("countch1").innerHTML=favorite1;
});
});
});
</script>

0

function selectedValues(ele){
  var arr = [];
  for(var i = 0; i < ele.length; i++){
    if(ele[i].type == 'checkbox' && ele[i].checked){
      arr.push(ele[i].value);
    }
  }
  return arr;
}


Yararlı bir cevap için bu reaksiyonun uzatılması gerekir. Bunun neden soruya bir cevap olduğunu açıklayın.
Jeroen Heier

Stack Overflow'a hoş geldiniz ve katkınız için teşekkürler! Bu kılavuzu okursanız iyi bir cevap yazıp cevabınızı buna göre ayarlayabilirsiniz. Teşekkürler!
David

0
var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.