Dynamically set the checkbox to be checked or unchecked

[Wushuang Bai]

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 

          

[Madhan Venkateshan]

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 

 

<input id="checked" type="checkbox"> 

 

 

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 

[Wushuang Bai]

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 

[Madhan Venkateshan]

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 

<input id="checked" type="checkbox"> 

 

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 

[Wushuang Bai]

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 

[Madhan Venkateshan]

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