Alle ausgewählten Kontrollkästchen in einem Array abrufen

168

Also habe ich diese Kontrollkästchen:

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

Und so weiter. Es gibt ungefähr 6 von ihnen und sie sind handcodiert (dh nicht von einer Datenbank abgerufen), so dass sie wahrscheinlich für eine Weile gleich bleiben.

Meine Frage ist, wie ich sie alle in einem Array (in Javascript) erhalten kann, damit ich sie verwenden kann, während ich $.postmit Jquery eine AJAX- Anfrage stelle.

Irgendwelche Gedanken?

Bearbeiten: Ich möchte nur, dass die ausgewählten Kontrollkästchen zum Array hinzugefügt werden

javascript jquery ajax dhtml Klicken Sie auf Upvote
quelle

Mögliches Duplikat von jquery mehrere Kontrollkästchen Array

Jason C

Während die andere Frage neuer und diese populärer ist, hat die andere eine bessere, prägnantere Sammlung von Antworten (einschließlich der Strategien hier und einiger).

Jason C

331

Formatiert:

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

Hoffentlich wird es funktionieren.

ybo
quelle

1

und was zu tun ist, wenn das Kontrollkästchen deaktiviert ist, um den Wert aus dem Array zu entfernen

Jubin Patel

@JubinPatel Sie müssen nur das Array vor diesem Code zurücksetzen. yourArray = []

RRK

11

Sie können Ihr Array auch sofort definieren, indem Sie mapstatt 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 am

50

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

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

Milind
quelle

6

Soweit ich den obigen Code verstehe, durchläuft er alle Kontrollkästchen und deaktiviert sie. Wie hängt diese Antwort mit der Frage zusammen?

Terite

2

Dies durchläuft einfach die Kontrollkästchen und deaktiviert sie. Die richtige Antwort in VanillaJS finden Sie in der Antwort von zahid ullah unten.

JMknoll

2

Wie beantwortet dies die Frage? Dies hat etwas völlig Unabhängiges mit dem, was gefragt wird. Warum gibt es so viele positive Stimmen? Vermisse ich etwas oder wurde die Frage bearbeitet, nachdem die Leute sie bewertet haben?

Shubham Chaudhary

46

Pure JS

Für diejenigen, die jQuery nicht verwenden möchten

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
quelle

5

Ich liebe immer eine Vanille JS Antwort.

Formicini

39

Ich habe es nicht getestet, aber es sollte funktionieren

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

$(document).ready(function() {

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

});

</script>

Barbaros Alp
quelle

Drücken Sie, um einen Wert im Array hinzuzufügen, aber was soll beim Deaktivieren entfernt werden?

Jubin Patel

24

Dies sollte den Trick tun:

$('input:checked');

Ich glaube nicht, dass Sie andere Elemente haben, die überprüft werden können, aber wenn Sie dies tun, müssten Sie es genauer machen:

$('input:checkbox:checked');

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

Georg Schölly
quelle

14

In MooTools 1.3 (spätestens zum Zeitpunkt des Schreibens):

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

LeeGee
quelle

7

Wusste nicht, dass das Alter der Frage oder die Art der Lösung relevant war.

LeeGee

4

Weil ich diese Frage gefunden habe, als ich mit MooTools nach der Antwort auf dasselbe Problem gesucht habe.

LeeGee

Beachten Sie, dass sich diese Antwort auf MooTools 1.3 bezieht, nicht auf jQuery.

LeeGee

13

Wenn Sie ein Vanille-JS verwenden möchten, können Sie dies ähnlich wie bei einem @ zahid-ullah tun, wobei Sie jedoch eine Schleife vermeiden:

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

Der gleiche Code in ES6 sieht viel besser aus:

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

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Terite
quelle

12

In Javascript wäre es so (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;
}

zahid ullah
quelle

12

ES6-Version:

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

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

QuotesBro
quelle

5

Reines JavaScript ohne temporäre Variablen:

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

Wilbert
quelle

prägnanteste Lösung mit Vanille JS

M. Mufti

3

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

Jean-Marc Amon
quelle

3

Beim Aktivieren den Wert für das Kontrollkästchen hinzufügen und beim Deaktivieren den Wert subtrahieren

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

Erweitern Sie das Snippet

Joepraveen
quelle

Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu. Reine Code-Antworten sind normalerweise nicht nützlich.

Sjaustirni

2

Eine andere Möglichkeit, dies mit Vanilla JS in modernen Browsern zu tun (keine IE-Unterstützung und leider keine iOS Safari-Unterstützung zum Zeitpunkt des Schreibens), ist 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
quelle

1

Verwenden von Jquery

Sie müssen nur Klasse zu jeder Eingabe hinzufügen, ich habe Klasse "Quelle" hinzugefügt, Sie können es natürlich ändern

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

1

Benutze das:

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

MHK
quelle

0

Verwenden Sie den kommentierten if-Block, um das Hinzufügen von Werten zu verhindern, die sich bereits im Array befinden, wenn Sie auf die Schaltfläche klicken oder etwas, um die Einfügung auszuführen

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

Erweitern Sie das Snippet

Nisal Edu
quelle

0

Sie könnten so etwas versuchen:

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

Hier

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

0

Hier ist mein Code für das gleiche Problem, das auch jemand ausprobieren kann. 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
quelle

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

Erweitern Sie das Snippet

kapil
quelle

Für eine nützliche Antwort muss diese Reaktion erweitert werden. Erklären Sie, warum dies eine Antwort auf die Frage ist.

Jeroen Heier

Willkommen bei Stack Overflow und vielen Dank für Ihren Beitrag! Es wäre schön, wenn Sie diese Anleitung lesen würden. So schreiben Sie eine gute Antwort und passen Ihre Antwort entsprechend an. Vielen Dank!

David

0

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

Salione
quelle

Alle ausgewählten Kontrollkästchen in einem Array abrufen

Antworten: