I want to loop through the checkboxgroup 'locationthemes' and build a string with all selected values. So when checkbox 2 and 4 are selected the result would be: "3,8"
<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>
I checked here: http://api.jquery.com/checked-selector/ but there's no example how to select a checkboxgroup by its name.
How can I do this?
This question is related to
javascript
jquery
A bit more modern way to do it:
const selectedValues = $('input[name="locationthemes"]:checked').map( function () {
return $(this).val();
})
.get()
.join(', ');
We first find all the selected checkboxes with the given name, and then jQuery's map() iterates through each of them, calling the callback on it to get the value, and returning the result as a new jQuery collection that now holds the checkbox values. We then call get() on it to get an array of values, and then join() to concatenate them into a single string - which is then assigned to the constant selectedValues.
Jquery 3.3.1 , getting values for all checked check boxes on button click
$(document).ready(function(){_x000D_
$(".btn-submit").click(function(){_x000D_
$('.cbCheck:checkbox:checked').each(function(){_x000D_
alert($(this).val())_x000D_
});_x000D_
}); _x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<input type="checkbox" id="vehicle1" name="vehicle1" class="cbCheck" value="Bike">_x000D_
<label for="vehicle1"> I have a bike</label><br>_x000D_
<input type="checkbox" id="vehicle2" name="vehicle2" class="cbCheck" value="Car">_x000D_
<label for="vehicle2"> I have a car</label><br>_x000D_
<input type="checkbox" id="vehicle3" name="vehicle3" class="cbCheck" value="Boat">_x000D_
<label for="vehicle3"> I have a boat</label><br><br>_x000D_
<input type="submit" value="Submit" class="btn-submit">var voyageId = new Array();
$("input[name='voyageId[]']:checked:enabled").each(function () {
voyageId.push($(this).val());
});
Using jquery's map function
var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
checkboxValues.push($(this).val());
});
Get Selected Checkboxes Value Using jQuery
Then we write jQuery script to get selected checkbox value in an array using jQuery each(). Using this jQuery function it runs a loop to get the checked value and put it into an array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Selected Checkboxes Value Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn").click(function() {
var locationthemes = [];
$.each($("input[name='locationthemes']:checked"), function() {
locationthemes.push($(this).val());
});
alert("My location themes colors are: " + locationthemes.join(", "));
});
});
</script>
</head>
<body>
<form method="POST">
<h3>Select your location themes:</h3>
<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>
<br>
<button type="button" class="btn">Get Values</button>
</form>
</body>
</html>
Map the array is the quickest and cleanest.
var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })
will return values as an array like:
array => [2,3]
assuming castle and barn were checked and the others were not.
$("#locationthemes").prop("checked")
So all in one line:
var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");
..a note about the selector [id*="checkbox"] , it will grab any item with the string "checkbox" in it. A bit clumsy here, but really good if you are trying to pull the selected values out of something like a .NET CheckBoxList. In that case "checkbox" would be the name that you gave the CheckBoxList control.
You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
SlectedList.push($(this).val());
});
Source: Stackoverflow.com