Obtenir toutes les cases à cocher sélectionnées dans un tableau

168

J'ai donc ces cases à cocher:

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

Etc. Il y en a environ 6 et sont codés à la main (c'est-à-dire non extraits d'une base de données), ils sont donc susceptibles de rester les mêmes pendant un certain temps.

Ma question est de savoir comment je peux tous les obtenir dans un tableau (en javascript), afin que je puisse les utiliser tout en faisant une $.postrequête AJAX en utilisant Jquery.

Des pensées?

Modifier: je voudrais uniquement que les cases à cocher sélectionnées soient ajoutées au tableau

javascript jquery ajax dhtml Cliquez sur Upvote
la source

Copie possible du tableau jquery multiple checkboxes

Jason C

Alors que l' autre question est plus récente et que celle-ci est plus populaire, l'autre a une meilleure collection de réponses plus succincte (y compris les stratégies ici, plus certaines).

Jason C

332

Formaté:

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

Espérons que cela fonctionnera.

ybo
la source

1

et que faire si décochez la case, pour supprimer la valeur du tableau

Jubin Patel

@JubinPatel il vous suffit de réinitialiser le tableau avant ce code. yourArray = []

RRK

11

Vous pouvez également définir votre tableau immédiatement en utilisant mapau lieu de each:var yourArray = $("input:checkbox[name=type]:checked").map(function(){return $(this).val()}).get()

Duvrai

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

Milind
la source

6

Si je comprends bien le code ci-dessus, il parcourt toutes les cases à cocher et les décoche. Comment cette réponse est-elle liée à la question?

Terite

2

Cela boucle simplement les cases à cocher et les décoche. Pour la bonne réponse, dans VanillaJS, veuillez voir la réponse de zahid ullah ci-dessous.

jmknoll

2

Comment cela répond-il à la question? Cela n'a aucun rapport avec ce qui est demandé. Pourquoi y a-t-il autant de votes positifs? Est-ce que je manque quelque chose ou la question a-t-elle été modifiée après que les gens l'ont votée?

Shubham Chaudhary

46

Pure JS

Pour ceux qui ne veulent pas utiliser jQuery

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

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

Chris Underdown
la source

5

Aimez toujours une réponse JS vanille.

formicini

39

Je ne l'ai pas testé mais ça devrait marcher

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

$(document).ready(function() {

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

});

</script>

Alpage Barbaros
la source

pousser pour ajouter de la valeur dans le tableau mais que supprimer en décochant?

Jubin Patel

24

Cela devrait faire l'affaire:

$('input:checked');

Je ne pense pas que vous ayez d'autres éléments qui peuvent être vérifiés, mais si vous le faites, vous devrez le rendre plus précis:

$('input:checkbox:checked');

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

Georg Schölly
la source

14

Dans MooTools 1.3 (dernier au moment de la rédaction):

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

LeeGee
la source

7

Je n'avais pas réalisé que l'âge de la question ou la nature de la solution était pertinente.

LeeGee

4

Parce que j'ai trouvé cette question en cherchant la réponse au même problème en utilisant MooTools.

LeeGee

Notez que cette réponse concerne MooTools 1.3, pas jQuery.

LeeGee

13

Si vous souhaitez utiliser un JS vanilla, vous pouvez le faire de la même manière qu'un @ zahid-ullah, mais en évitant une boucle:

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

Le même code dans ES6 est bien meilleur:

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

Afficher l'extrait de code

window.serialize = function serialize() {
  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });
  document.getElementById('serialized').innerText = JSON.stringify(values);
}

label {
  display: block;
}

<label>
  <input type="checkbox" name="fruits[]" value="banana">Banana
</label>
<label>
  <input type="checkbox" name="fruits[]" value="apple">Apple
</label>
<label>
  <input type="checkbox" name="fruits[]" value="peach">Peach
</label>
<label>
  <input type="checkbox" name="fruits[]" value="orange">Orange
</label>
<label>
  <input type="checkbox" name="fruits[]" value="strawberry">Strawberry
</label>
<button onclick="serialize()">Serialize
</button>
<div id="serialized">
</div>

Développer l'extrait

Terite
la source

12

En Javascript, ce serait comme ça (lien démo) :

// 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;
}

zahid ullah
la source

12

Version ES6:

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

Afficher l'extrait de code

function getCheckedValues() {
  return Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);
}

const resultEl = document.getElementById('result');

document.getElementById('showResult').addEventListener('click', () => {
  resultEl.innerHTML = getCheckedValues();
});

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

<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="result"></div>

Développer l'extrait

citationsBro
la source

5

JavaScript pur sans besoin de variables temporaires:

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

Wilbert
la source

solution la plus concise utilisant la vanille JS

M. Mufti

3

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

Jean-Marc Amon
la source

3

En cochant, ajoutez la valeur de la case à cocher et en décochant soustraire la valeur

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

Développer l'extrait

Joepraveen
la source

Veuillez ajouter un peu d'explication à votre réponse. Les réponses en code pur ne sont généralement pas utiles.

sjaustirni

3

Une autre façon de faire cela avec vanilla JS dans les navigateurs modernes (pas de support IE, et malheureusement pas de support iOS Safari au moment de la rédaction) est avec 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

foz
la source

1

Utilisation de Jquery

Il vous suffit d'ajouter une classe à chaque entrée, j'ai ajouté une classe "source", vous pouvez la changer bien sûr

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

Ahmed Al Bermawy
la source

1

Utilisez ceci:

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

MHK
la source

0

Utilisez commented if block pour empêcher l'ajout de valeurs déjà présentes dans le tableau si vous utilisez un clic sur le bouton ou quelque chose pour exécuter l'insertion

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

Développer l'extrait

Nisal Edu
la source

0

Vous pouvez essayer quelque chose comme ceci:

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

Ici

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

pappu kr Sharma
la source

0

voici mon code pour le même problème, quelqu'un peut également essayer ceci. 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>

Rahul Gupta
la source

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

Développer l'extrait

kapil
la source

Pour une réponse utile, cette réaction doit être étendue. Expliquez pourquoi c'est une réponse à la question.

Jeroen Heier

Bienvenue sur Stack Overflow et merci pour votre contribution! Ce serait bien si vous lisiez ce guide Comment rédiger une bonne réponse et ajuster votre réponse en conséquence. Merci!

David

0

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

Salione
la source

Obtenir toutes les cases à cocher sélectionnées dans un tableau

Réponses: