Ottenere tutte le caselle di controllo selezionate in un array


168

Quindi ho queste caselle di controllo:

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

E così via. Ce ne sono circa 6 e sono codificati a mano (cioè non recuperati da un db), quindi è probabile che rimangano gli stessi per un po '.

La mia domanda è come posso metterli tutti in un array (in javascript), quindi posso usarli mentre faccio una $.postrichiesta AJAX usando Jquery.

qualche idea?

Modifica: vorrei solo aggiungere le caselle di controllo selezionate all'array


Possibile duplicato di array di caselle multiple jquery
Jason C

Mentre l' altra domanda è più recente e questa è più popolare, l'altra ha una raccolta di risposte migliore e più concisa (comprese le strategie qui, più alcune).
Jason C,

Risposte:


331

Formattato:

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

Speriamo che funzioni.


1
e cosa fare se deselezionare la casella di controllo, per rimuovere il valore dall'array
Jubin Patel

@JubinPatel devi solo resettare l'array prima di questo codice. yourArray = []
RRK,

11
Puoi anche definire il tuo array immediatamente usando mapinvece di each:var yourArray = $("input:checkbox[name=type]:checked").map(function(){return $(this).val()}).get()
Duvrai il

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
Quando capisco il codice sopra, scorre tutte le caselle di controllo e deselezionale. In che modo questa risposta è collegata alla domanda?
Terite,

2
Questo semplicemente scorre le caselle e le deseleziona. Per la risposta corretta, in VanillaJS, vedere la risposta di zahid ullah di seguito.
jmknoll,

2
Come risponde alla domanda? Questo fa qualcosa di completamente estraneo a ciò che viene chiesto. Perché ci sono così tanti voti positivi? Mi manca qualcosa o la domanda è stata modificata dopo che la gente l'ha votata?
Shubham Chaudhary,

46

JS puro

Per coloro che non vogliono usare jQuery

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

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

5
Adoro sempre una risposta JS alla vaniglia.
formicini,

39

Non l'ho provato ma dovrebbe funzionare

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

$(document).ready(function() {

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

});

</script>

spingere per aggiungere valore in array ma cosa rimuovere in deselezionare?
Jubin Patel,

24

Questo dovrebbe fare il trucco:

$('input:checked');

Non penso che tu abbia altri elementi che possono essere controllati, ma se lo fai, dovresti renderlo più specifico:

$('input:checkbox:checked');

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

14

In MooTools 1.3 (ultimo al momento della stesura):

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

7
Non ho capito che l'età della domanda o la natura della soluzione erano rilevanti.
LeeGee,

4
Perché ho trovato questa domanda quando cercavo la risposta allo stesso problema usando MooTools.
LeeGee,

Nota che questa risposta si riferisce a MooTools 1.3, non a jQuery.
LeeGee,

13

Se vuoi usare un JS alla vaniglia, puoi farlo in modo simile a un @ zahid-ullah, evitando un loop:

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

Lo stesso codice in ES6 ha un aspetto migliore:

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


12

In Javascript sarebbe così (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

Versione ES6:

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


5

JavaScript puro senza necessità di variabili temporanee:

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

soluzione più concisa che utilizza la vaniglia JS
M. Mufti il

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

3

Al momento del controllo aggiungere il valore per la casella di controllo e al decontrollo sottrarre il valore

$('#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>


Aggiungi un po 'di spiegazione alla tua risposta. Le risposte in codice puro non sono generalmente utili.
sjaustirni,

3

Un altro modo per farlo con JS vaniglia nei browser moderni (nessun supporto IE e purtroppo nessun supporto iOS Safari al momento della scrittura) è con FormData.getAll () :

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

Usando Jquery

Hai solo bisogno di aggiungere classe ad ogni input, ho aggiunto la classe "fonte", puoi cambiarla ovviamente

<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

Usa questo:

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

0

Utilizzare commentato se blocco per impedire l'aggiunta di valori già presenti nell'array se si utilizza il clic sul pulsante o qualcosa per eseguire l'inserimento

$('#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

Potresti provare qualcosa del genere:

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

Qui

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

0

ecco il mio codice per lo stesso problema che qualcuno può provare anche questo. 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;
}


Per una risposta utile questa reazione deve essere estesa. Spiega perché questa è una risposta alla domanda.
Jeroen Heier,

Benvenuto in Stack Overflow e grazie per il tuo contributo! Sarebbe bello se tu leggessi questa guida Come scrivere una buona risposta e adattare di conseguenza la tua risposta. Grazie!
David

0
var array = []
    $("input:checkbox[name=type]:checked").each(function(){
        array.push($(this).val());
    });
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.