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


#1

Hi,

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,

app.component.ts

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

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

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

  constructor(
  ) {}

  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) {
      return;
        }

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

app.component.html

  <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>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    <Button class="btn btn-primary btn-active" text="Save" (tap)="onSelect()" textWrap="true"></Button>
    </StackLayout>

radio-option.ts

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

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

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


#2

I have the same question. How did you solved ?


#3

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

radioOption.name
radioOption.value


#4

Please, could you show in my example:

I used JS type.

xml:

<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}}"/>
</StackLayout>

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

When i push button:

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

}

#5

Add the name attribute to RadioOption

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

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) {
  return;
}

#6

Where they are type ? (file, func)


#7

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


#8

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


#10

xml:

<Page
    class="page"
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:CheckBox="nativescript-checkbox">

	...
	<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"/>	
</Page>

ts:

export function CheckAll(args) {
    console.log("testCheck="+testCheck);
    let elements = <any> document.getElementsByName("chb1");
	for (let key in elements) {
		let cur_chb = elements[key];
		cur_chb.checked=true;
	}	
}

Error:
ReferenceError: document is not defined


#11

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.


#12

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


#13

How can I use this method ?


#14

Please refer the plugin docs in the given link.


#15

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