How to get input checkbox (change) event value on and off?

Question

The result always coming as "on". I want to make it get two results when on and off.

  <label class="switch switch-3d switch-primary switch-success">
    <input type="checkbox" (change)="isChangeLimitAccessToggle($event.target.value)" id="ifLimitAccess" class="switch-input">
    <!-- [attr.disabled]="switchDisable?'':null"  [checked]="switchEnable" -->
    <span class="switch-label" data-on="Yes" data-off="No"></span>
    <span class="switch-handle"></span>
  </label>

Azamat Zorkanov · Accepted Answer · 2018-07-20 07:06:15Z

15

Just use checked attribute:

<input type="checkbox" (change)="isChangeLimitAccessToggle($event.target.checked ? 'on' : 'off')" id="ifLimitAccess" class="switch-input">

answered Jul 20, 2018 at 7:06

Azamat Zorkanov

8191 gold badge5 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pepe Alvarez Over a year ago

If someone uses mat-checkbox instead of input, then use $event.checked, since there is no attribute target in that case.

m1ld Over a year ago

won't work with strict checks.

dave0688 Over a year ago

That's true - the types are somehow not correct. Anyone know how to strictly type that?

Michael Desigaud · Accepted Answer · 2018-07-20 07:05:08Z

2

Add the [(ngModel)] directive to your input:

<label class="switch switch-3d switch-primary switch-success">
<input type="checkbox" [(ngModel)]="checkboxValue"(change)="isChangeLimitAccessToggle(checkboxValue)" id="ifLimitAccess" class="switch-input">
<!-- [attr.disabled]="switchDisable?'':null"  [checked]="switchEnable" -->
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>

answered Jul 20, 2018 at 7:05

Michael Desigaud

2,1451 gold badge15 silver badges16 bronze badges

1 Comment

Chanaka Amarasinghe Over a year ago

this one also if we are using formControlName

Nagender Pratap Chauhan · Accepted Answer · 2018-07-20 07:14:43Z

0

<input type="checkbox" value = "1"(change)="isChangeLimitAccessToggle($event.target.value)"  class="switch-input">

you can pass value in input tag and when you will click on check box then you get 1 value so it will work for you.

answered Jul 20, 2018 at 7:14

Nagender Pratap Chauhan

2,23417 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to get input checkbox (change) event value on and off?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related