We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamically set the checkbox to be checked or unchecked

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 
          

5 Replies

MV Madhan Venkateshan Syncfusion Team 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 
 
<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;  
});  
 
 
Please get back to us if you need further assistance. 
  
Regards, 
Madhan V 



WB Wushuang Bai 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 


MV Madhan Venkateshan Syncfusion Team 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 
<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; 
  }); 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Madhan V 



WB Wushuang Bai 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 


MV Madhan Venkateshan Syncfusion Team 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> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Madhan V 


Loader.
Live Chat Icon For mobile
Up arrow icon