web-dev-qa-db-fra.com

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

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), de sorte qu'ils sont susceptibles de rester les mêmes pendant un certain temps.

Ma question est de savoir comment je peux les obtenir tous dans un tableau (en javascript), de sorte que je puisse les utiliser en faisant une demande AJAX $.post en utilisant Jquery.

Des pensées?

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

javascriptjqueryajaxdhtml
146
Click Upvote

Formaté:

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

Espérons que cela fonctionnera.

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

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

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>
37
Barbaros Alp

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)
}
26
Chris Underdown

Cela devrait faire l'affaire:

$('input:checked');

Je ne pense pas que vous ayez d'autres éléments à vérifier, mais si vous le faites, vous devrez le préciser:

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');
23
Georg Schölly

Dans MooTools 1.3 (au plus tard à la date de rédaction):

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

En Javascript, ce serait comme ceci (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
zahid ullah

Si vous voulez utiliser un Vanilla JS, 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 semble beaucoup mieux:

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

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

version ES6:

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

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

Après vérification, ajouter la valeur pour la case à cocher et décocher pour 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>
3
Joepraveen
var checkedValues = $('input:checkbox.vdrSelected:checked').map(function () {
        return this.value;
    }).get();
3
Jean-Marc Amon

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 l'écriture) 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
1
foz

Utilisez ceci:

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

Utiliser JQuery

Il suffit d’ajouter une classe à chaque entrée, j’ajoute une classe "source" que vous pouvez 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>
1
Ahmed Al Bermawy
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;
}
0
kapil

Utilisez commented si block pour empêcher l'ajout de valeurs ayant déjà été placées dans un tableau si vous utilisez un clic de 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>
0
Nisal Edu

voici mon code pour le même problème, quelqu'un peut aussi essayer cela. 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
Rahul Gupta

Vous pouvez essayer quelque chose comme ça:

$('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,
0
pappu kr Sharma