onsen-ui get and set value of ons-checkbox - onsen-ui

Question

I am having trouble using javascript to get and set the value of ons-checkbox elements. I have read through the docs and am stuck. Any advice or direction would be much appreciated.
Sean

Answer 1

If you want to use pure JavaScript for your OnsenUI app, I suggest you use Onsen CSS component. In other words, you will have OnsenUI style for your app by just adding the css of the Onsen CSS component you want. Then, use JavaScript to access those components just like how you do it with any HTML components. For example in this case a checkedbox. Please see the example here about how to set/get the value as well as check status.
However, if you still wanna use OnsenUI's elements. There are 2 ways to do it:
1. Directly in the html page:
<!--Set the value directly in the tag-->
<section style="padding: 10px;">
<ons-checkbox
ng-model="answer"
ng-true-value="YES"
ng-false-value="NO">
Yes or No?
</ons-checkbox>
<br>
<!--Get the value directly-->
<span>{{answer}}</span>
</section>
2. Via AngularJS
page.html
<ons-page class="center" ng-controller="Test_Ctrl">
<h1>Checkbox Value</h1>
<section style="padding: 10px;">
<ons-checkbox ng-model="answer">
Yes or No?
</ons-checkbox>
<br>
<!--Get the value directly-->
<span>{{answer}}</span>
</section>
<!--Get the value by the script-->
<ons-button ng-click="check()">Result</ons-button>
</ons-page>
app.js
angular.module('myApp', ['onsen.directives']);
function Test_Ctrl($scope) {
$scope.check = function (){
if($scope.answer) //If the checkbox is checked.
$scope.answer="YES";
else //If the checkbox is unchecked.
$scope.answer = "NO";
alert($scope.answer);
}
}