I used radiobutton behavior for checkboxes, How shall i get the selected value?



I used radiobutton behavior for checkboxes as described here.

Its working fine. But i want to get the selected radiobutton’s boolean value and name. In this case how shall i get? Please suggest.

My codes are,


import { Component, OnInit } from "@angular/core";

import { RadioOption } from "./radio-option";

  selector: "ns-items",
  moduleId: module.id,
  templateUrl: "app.component.html"
export class AppComponent implements OnInit {
   radioOptions?: Array<RadioOption>;

  ) {}

  ngOnInit(): void {
    // Plain ol' inline Array definition coming up :)
    this.radioOptions = [
      new RadioOption("Radio option 1"),
      new RadioOption("Radio option 2"),
      new RadioOption("Radio option 3")

  //public checkedChange(modelRef) {
    //console.log("checkedChange:", modelRef.checked);
 // }

  changeCheckedRadio(radioOption: RadioOption): void {
    radioOption.selected = !radioOption.selected;
    if (!radioOption.selected) {

    // uncheck all other options
    this.radioOptions.forEach(option => {
      if (option.text !== radioOption.text) {
        option.selected = false;


  <StackLayout *tabItem="{title: 'Radiobuttons'}">
        <Label class="p-10" text="Tap either the buttons or the labels. You can even unselect the radiobutton selection." textWrap="true"></Label>
        <StackLayout class="p-10" *ngFor="let option of radioOptions">
            <StackLayout orientation="horizontal" verticalAlignment="center">
                <CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox"></CheckBox>
                <StackLayout verticalAlignment="center">
                    <Label [text]="option.text" textWrap="true" (tap)="changeCheckedRadio(option)"></Label>
    <Button class="btn btn-primary btn-active" text="Save" (tap)="onSelect()" textWrap="true"></Button>


export class RadioOption {
  text: string;
  selected: boolean = false;

  constructor(text: string) {
    this.text = text;

Thank you for reading, looking forward to reading your responses!


I have the same question. How did you solved ?


you can add “name” attribute to the RadioOption class, you can access the name and value in changeCheckedRadio(radioOption: RadioOption) event



Please, could you show in my example:

I used JS type.


<StackLayout id="sl_ans" row="4">
	<CheckBox:CheckBox text="{{chb00}}" id="chb00" checked="false" loaded ="toggleCheck" visibility="{{chvis00}}"/>
	<CheckBox:CheckBox text="{{chb01}}" id="chb01" checked="false" loaded ="toggleCheck" visibility="{{chvis01}}"/>
	<CheckBox:CheckBox text="{{chb02}}" id="chb02" checked="false" loaded ="toggleCheck" visibility="{{chvis02}}"/>

<Button row="9" text="Next" tap="tapNext" class="my-button" visibility="{{Btn_visib1}}" />

When i push button:

function tapNext(args) {
    var page = args.object;



Add the name attribute to RadioOption

export class RadioOption {
text: string;
selected: boolean = false;

constructor(name:string, text: string) {
this.name = name;
this.text = text;

in ChangeCheckedRadio event you can access name like this

changeCheckedRadio(radioOption: RadioOption): void {
radioOption.selected = !radioOption.selected;

**console.log("Radio Text" + radioOption.text + radioOption.name);**

if (!radioOption.selected) {


Where they are type ? (file, func)


Its in the demo-ng/app/item folder.


I don’t use TS, js or css file ?




	<CheckBox:CheckBox text="chb00" id="chb00" name="chb1" checked="false"/>
	<CheckBox:CheckBox text="chb01" id="chb01" name="chb1" checked="false"/>
	<CheckBox:CheckBox text="chb02" id="chb02" name="chb1" checked="false"/>
	<Button text="Check all" tap="CheckAll"/>	


export function CheckAll(args) {
    let elements = <any> document.getElementsByName("chb1");
	for (let key in elements) {
		let cur_chb = elements[key];

ReferenceError: document is not defined


I’m not sure why you are using document here, obviously it is undefined - we are not inside a browser.

Please refer to official docs to know different ways to access elements with and without ids. If you are more interested in using dom apis, checkout this plugin.


I used this method early, and have problem s in IOS.
After in this topic recomend using classes, and select by name.


How can I use this method ?


Please refer the plugin docs in the given link.


And this method doesn’t work for dynamical created objects.
Work only predefined elements in xml.