Dynamically set the checkbox to be checked or unchecked

Wushuang Bai

Asked On November 5, 2019 09:59 PM UTC

Hi Syncfusion support team,

I want to dynamically set the checkbox to be checked or unchecked;

I tried document.getElementById('checkbox').checked = true , but it didn't work.

Is there any way I can do that ? (Basically this is asking how can I get the property of checked)

Thanks a lot for your help !

Best regards,

Wushuang

Reply | Reply with quote

Madhan Venkateshan [Syncfusion]

Replied On November 6, 2019 03:18 PM UTC

Hi Wushuang Bai,

Thank you for contacting Syncfusion support.

We have checked your reported query and it can be achieved by using checked property. We have created simple sample based on your scenario, in that sample we have changed the checkbox mode dynamically using button click. Please refer the below code snippet and sample link,

Html

Ts

let button: Button = new Button();

button.appendTo('#btn');

let checkBoxObj: CheckBox = new CheckBox({ label: 'CheckBox', checked: true });

checkBoxObj.appendTo('#checked');

document.getElementById("btn").addEventListener('click', function () {

let instance: CheckBox = getComponent(document.getElementById("checked"), "checkbox");

instance.checked = instance.checked === true ? false: true;

});

https://stackblitz.com/edit/golpzv-bxfwjz?file=index.ts

Please get back to us if you need further assistance.

Regards,

Madhan V

Reply | Reply with quote

Wushuang Bai

Replied On November 6, 2019 06:19 PM UTC

Hi Madhan,

Thank you for your reply.

Since I'm not familiar with typecript, can you provide an example using pure javascript ?

Thank you,

Wushuang

Reply | Reply with quote

Madhan Venkateshan [Syncfusion]

Replied On November 7, 2019 10:46 AM UTC

Hi Wushuang Bai,

Thanks for your update.

We have prepared a sample based on your requirement in pure javascript, Please refer the below code snippet and sample link,

Html

Js

button = new ej.buttons.Button({});

button.appendTo("#btn");

var checkBoxObj = new ej.buttons.CheckBox({ label: "CheckBox", checked: true });

checkBoxObj.appendTo("#checked");

document.getElementById("btn").addEventListener("click", function () {

var instance = ej.base.getComponent(

document.getElementById("checked"),

"checkbox"

);

instance.checked = instance.checked === true ? false : true;

});

Sample Link: https://stackblitz.com/edit/mtg5y8-bhesnr?file=index.js

Please get back to us if you need further assistance.

Regards,

Madhan V

Reply | Reply with quote

Wushuang Bai

Replied On November 7, 2019 08:04 PM UTC

Hi Madhan,

Thanks for the help ! Now I can dynamically change it.

Also, how can we set the label font size in the checkbox ? ( either using js or css or html)

Thank you,

Wushuang

Reply | Reply with quote

Madhan Venkateshan [Syncfusion]

Replied On November 8, 2019 12:03 PM UTC

Hi Wushuang Bai,

Thanks for your update.

We have checked your reported query and it can be achieved by changing style property ‘font-size’ in css class (“.e-checkbox-wrapper .e-label” ). We have created simple sample based on your scenario, in that sample we have set the font size 25px to the checkbox label.

Please refer the below code snippet and Sample link,

css

<style>

.e-checkbox-wrapper .e-label {

font-size: 25px;

}

</style>

Sample Link: https://stackblitz.com/edit/tfi1ys-bx5zoe?file=index.html

Please get back to us if you need further assistance.

Regards,

Madhan V

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148830	Nov 5,2019 09:59 PM UTC	Nov 8,2019 12:03 PM UTC	JavaScript - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US