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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamically set the checkbox to be checked or unchecked

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
loading
Tags: CheckBox
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 
          

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 
 
<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 


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 

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 
<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 


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 

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon