2012-07-02 12 views
55

Chcę przechodzić przez grupę "checkthemes" checkboxgroup i budować ciąg ze wszystkimi wybranymi wartościami. Więc gdy checkbox 2 i 4 są wybierane wynikiem byłoby: „3,8”użyj jQuery, aby uzyskać wartości z zaznaczonych pól wyboru

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" /> 
<label for="checkbox-1">Castle</label> 
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" /> 
<label for="checkbox-2">Barn</label> 
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" /> 
<label for="checkbox-3">Restaurant</label> 
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" /> 
<label for="checkbox-4">Bar</label> 

Sprawdziłem tutaj: http://api.jquery.com/checked-selector/ ale nie ma przykład jak wybrać checkboxgroup według nazwy.

Jak mogę to zrobić?

Odpowiedz

125

w jQuery wystarczy użyć selektora atrybutu jak

$('input[name="locationthemes"]:checked'); 

aby zaznaczyć wszystkie zaznaczone wejścia o nazwie "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize()); 

//or 

$('input[name="locationthemes"]:checked').each(function() { 
    console.log(this.value); 
}); 

Demo


W VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) { 
    console.log(cb.value); 
}); 

Demo

+4

Ty, mój przyjacielu, oszczędzasz życie. – Haring10

+0

Szczególnie podoba mi się ten pomysł przy użyciu logów konsoli. Dziękuję za to. –

24
$('input:checkbox[name=locationthemes]:checked').each(function() 
{ 
    // add $(this).val() to your array 
}); 

robocza Demo

LUB

is() funkcja

użyć jQuery za:

$('input:checkbox[name=locationthemes]').each(function() 
{  
    if($(this).is(':checked')) 
     alert($(this).val()); 
}); 

4
You can also use the below code 
$("input:checkbox:checked").map(function() 
{ 
return $(this).val(); 
}).get(); 
+1

Jak przypisać ten wynik do zmiennej –

10

jQuery za map funkcję

var checkboxValues = []; 
$('input[name=checkboxName]:checked').map(function() { 
      checkboxValues.push($(this).val()); 
}); 
+0

przy założeniu, że checkboxName powinno być "locationthemes" w tym przykładzie – hrabinowitz

1

Więc wszystko w jednym wierszu:

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); }).get().join(","); 

..a pamiętać o selektora [id*="checkbox"], to będzie chwyć dowolny przedmiot z ciągiem "checkbox" w nim. Trochę niezgrabne, ale naprawdę dobre, jeśli próbujesz wyciągnąć wybrane wartości z czegoś podobnego do .NET CheckBoxList. W takim przypadku "checkbox" będzie nazwą, którą nadałeś kontrolce CheckBoxList.

6

Mapowanie tablicy jest najszybsze i najczystsze.

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; }) 

powróci jako tablica wartości jak:

array => [2,3] 

zakładając zostały sprawdzone zamek i stodoła, a inni nie.

6

$("#locationthemes").prop("checked")

+0

To powinno być komentarzem –

Powiązane problemy