Angular click event: how to select a checkbox within an a element?

Question

In my Angular app I have the following menu:

As you can see I have items (that are a elements) and a checkbox and a label in each of them:

<span class="caption">RAM</span>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>4 GB</label>
    </div>
</a>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>8 GB</label>
    </div>
</a>
<a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden">
        <label>16 GB</label>
    </div>
</a>

How should I add (click) to every item to correctly handle event capturing so if user click on label or on whole item I get the related checkbox selected?

...Or do you know a better way to reach what I mean?

Martin Parenteau · Accepted Answer · 2020-01-17 19:13:00Z

2

To make sure that clicking on the label toggles the checkbox, include the input element inside of the label (as explained in MDN):

<a class="sub-item item">
  <div class="item-checkbox">
    <label><input type="checkbox" tabindex="0" class="hidden">4 GB</label>
  </div>
</a>

If you also want the label to fill the anchor element, define the CSS as shown below. With this styling in place, clicking on the anchor will toggle the checkbox.

.ui.secondary.menu a.item {
  padding: 0px;
}

div.item-checkbox {
  width: 100%;
  height: 100%;
}

div.item-checkbox > label {
  display: block;
  padding: .78571429em .92857143em;
}

div.item-checkbox > label > input {
  margin-right: 0.25rem;
}

See this stackblitz for a demo.

edited Jan 17, 2020 at 19:13

answered Jan 16, 2020 at 17:49

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

2 Comments

smartmouse Over a year ago

This looks to be the best answer. Anyway how to extend click to the a element? So clicking on the a will toggle the checkbox. Please have a look at my stackblitz: stackblitz.com/edit/semantic-ui-udkfhf. Thank you

Martin Parenteau Over a year ago

I updated the answer and the stackblitz to make sure that clicking on the anchor toggles the checkbox.

Addis · Accepted Answer · 2020-01-16 16:36:23Z

1

If you can place all the checkboxes in a container, you can set a single click event listener on the container, and event.target will give you the clicked element and previousElementSibling will select the sibling input.

function doSomething() {
    const selectedInput = event.target.previousElementSibling;
    selectedInput.checked = selectedInput.checked? false : true;
}

But in case there is a probability that you document structure changes in the future, say for example, if other elements get in between the input and the label, or their order changes, then the sibling selector will fail. To solve this you can use a parent selector instead and select the chechbox input element inside of it.

document.getElementById('container').addEventListener('click', doSomething);

function doSomething() {
    const selectedElement = event.target.parentElement.querySelector('input[type="checkbox"]');
    selectedElement.checked = selectedElement.checked? false:true;
}

<div id= 'container'>
  <span class="caption">RAM</span>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="4 GB">
          <label>4 GB</label>
      </div>
  </a>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="8 GB">
          <label>8 GB</label>
      </div>
  </a>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="16 GB">
          <label>16 GB</label>
      </div>
  </a>
</div>

edited Jan 16, 2020 at 16:36

answered Jan 16, 2020 at 15:58

Addis

2,5402 gold badges16 silver badges21 bronze badges

1 Comment

smartmouse Over a year ago

I was not clear, sorry for this. I'm talking about "event capturing". I have edited my question. In your snippet if you click on label or on whole item I don't get related checkbox selected.

Nico Schuck · Accepted Answer · 2020-01-16 15:48:57Z

0

First of all you should use *ngFor to list all your options:

html:

<a class="item" *ngFor="let choice of checks; let i=index">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" [value]="choice.value" (change)="onCheckChange($event)">
        <label>{{choice.title}}</label>
    </div>
</a>

component:

public checks: Array<choices> = [
  {title: '4 GB', value: '4'},
  {title: "8 GB", value: '8'},
  {title: "16 GB", value: '16'}
];

public onCheckChange(event) {
    // do some things here
}

Further, you should use Reactive Forms to validate your choices: https://angular.io/guide/reactive-forms

answered Jan 16, 2020 at 15:48

Nico Schuck

9923 gold badges19 silver badges44 bronze badges

3 Comments

smartmouse Over a year ago

Yes, I'm using ReactiveForms and, yes, I'm using *ngFor. The code in my question is just a sample... Anyway, I was not enough clear, I have edited my question. Please read it again. Thank you!

Nico Schuck Over a year ago

If you just want that your span is also triggering the whole checkbox, how about to use material.angular.io/components/checkbox/overview?

smartmouse Over a year ago

I'm not using Material.

Himanshu Singh · Accepted Answer · 2020-01-16 15:53:11Z

0

You have to create a boolean array and bind this to your checkboxes.

.ts file

  myArray: any[] = [
 {
      "size": "2GB",
      "value":false
    },
    {
      "size": "4GB",
      "value":false
    },
    {
      "size": "8GB",
      "value":false
    }
]

.html file

<div *ngFor="let data of myArray">
 <a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" [(ngModel)]="data.value" (ngModelChange)="changeHandler()">
        <label>{{data.size}}</label>
    </div>
 </a>
</div>

Working demo : link

answered Jan 16, 2020 at 15:53

Himanshu Singh

2,1651 gold badge8 silver badges16 bronze badges

1 Comment

smartmouse Over a year ago

I was not clear, sorry for this. I'm talking about "event capturing". I have edited my question. In your snippet if you click on label or on whole item I don't get related checkbox selected.

Felipe Malara · Accepted Answer · 2020-01-16 15:57:55Z

0

You could do something like that:

const ramOptions = [
  {
    id: 1,
    size: '4 GB'
  },
  {
    id: 2,
    size: '8 GB'
  },
  {
    id: 3,
    size: '16 GB'
  }
]

And in html:

<a class="item" *ngFor="let option of ramOptions">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" (change)="onSelect(option.id)">
        <label>{{option.size}}</label>
    </div>
</a>

If in the .js/.ts file, you can create an interface to define the handler. Just as:

onSelect(id: string) {
  ...
}

answered Jan 16, 2020 at 15:57

Felipe Malara

1,9141 gold badge9 silver badges14 bronze badges

2 Comments

smartmouse Over a year ago

I was not clear, sorry for this. I'm talking about "event capturing". I have edited my question.

Felipe Malara Over a year ago

You could put the function call on the <a> element

Collectives™ on Stack Overflow

Angular click event: how to select a checkbox within an a element?

5 Answers 5

2 Comments

1 Comment

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related