CODEWITHSUNDEEP
htmlangulartypescript
Augustine
Augustine

Reputation: 109

Change input Checkbox value color when checked and uncheck

I want to achieve the below:

  1. when the checkbox is checked: change the value to green
  2. When the checkbox is unchecked: change the value to black

CSS: 

`<style>
  input[type="checkbox"]:checked + value:before{
  color: green;
}
</style>`

HTML

              <tr class="bg-primary text-white">                  
                <th scope="col" class="text-left">Email 1</th>                          
              </tr>


<ng-container *cdkVirtualFor="let contact of myContact">
              <tbody >
              <tr style="width:100%; min-height: 30px;">                   
                <td class="text-left " [title]="contact.mail1">
                   <input type = "checkbox"   value="{{contact.emails}}" id="checkboxEmail1"
                          [checked]="contact.emails === 1 || contact.emails === 3"
                          (change)="editContactEmail1(contact.id, $event)"
                          [disabled]="contact.sajpContact != 1" />
                  {{(contact.mail1.length>25) ? (contact.mail1 | slice:0:25) + '...' : (contact.mail1)}}
                </td></tr></tbody></ngcontainer>

Upvotes: 1

Views: 481

Answers (2)

Diogenis Siganos
Diogenis Siganos

Reputation: 797

You should add the following jQuery code:

$('input[type="checkbox"]').click(function() {
    if ($(this).is(":checked")) {
        setTimeout(() => { $(this).css({'outline': '2px solid green', 'outline-offset': '-2px'}); }, 1000);
    } else {
        setTimeout(() => { $(this).css({'outline': '2px solid black', 'outline-offset': '-2px'}); }, 1000);
    }
});

Upvotes: 2

user9700852
user9700852

Reputation: 9

And don’t put the `

<style> ...

Quotes!

Is it normal ? Is it server-side format ?

Upvotes: 0

Related Questions