Menu
How to get multiple selected check box values in Angular.js and insert into database separated with a comma (,) ?
385
Using jQuery, we first set an onclick event on the button after the document is loaded. In the onclick event, we created a function in which we first declared an array named arr. After that, we used a query selector to select all the selected checkboxes. Finally, we print all the vales in an alert box.
A checkbox is also known as a tick box or a selection box. A checkbox is a tiny user interface component that allows users to select more than one option from a given options list. We will create a small fruits list using HTML 5 and display that checkboxes list to the users to select more than one option.
Here to select multiple check boxes we selected each check box one by one. Select Element by id using document.getElementById (). then check checkbox is checked or not. If checked then push in array. JQuery makes code simple and easy, to select checkbox we can use either name, id or input type checkbox. We can use any of above ways as per need.
How to get multiple checkbox value in javascript with getElementById () Here to select multiple check boxes we selected each check box one by one. Select Element by id using document.getElementById (). then check checkbox is checked or not.
You will now see how to get the value of all checkboxes using the querySelectorAll () method marked by the user. This will fetch the checkboxes values from the HTML form and display the result. Now, you will see how to get all checkbox values marked by the user.
In your application you can use single check box or you can use multiple checkbox . Below examples will help you to understand multiple checkbox validation in j ...
You can use ng-repeat + ng-model over an array of options.
html
<body ng-controller="MainCtrl">
<div class="container">
<h1>Options</h1>
<div>
<div class="form-group" ng-repeat="option in options">
<label>{{option.name}}</label>
<input type="checkbox" ng-model="option.value">
</div>
</div>
<hr>
<button class="btn btn-primary" ng-click="save()">save to database</button>
</div>
</body>
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.options = [{
name: 'java',
value: true,
}, {
name: 'c#',
value: false
}, {
name: 'angular',
value: true
}, {
name: 'r',
value: false
}, {
name: 'python',
value: true
}, {
name: 'c++',
value: true
}];
$scope.save = function() {
var optionsCSV = '';
$scope.options.forEach(function(option) {
if (option.value) {
// If this is not the first item
if (optionsCSV) {
optionsCSV += ','
}
optionsCSV += option.name;
}
})
// Save the csv to your db (replace alert with your code)
alert(optionsCSV);
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
