9 Answers

• A little change to mitchell amihod solution using unicodes.
  It works perfectly on Android and iOS

  var checkbox = Ti.UI.createButton({
      title: '',
      top: 10,
      right: 10,
      width: 30,
      height: 30,
      borderColor: '#666',
      borderWidth: 2,
      borderRadius: 3,
      backgroundColor: '#aaa',
      backgroundImage: 'none',
      color: '#fff',
      font:{fontSize: 25, fontWeight: 'bold'},
      value: false //value is a custom property in this casehere.
  });
  
  //Attach some simple on/off actions
  checkbox.on = function() {
      this.backgroundColor = '#007690';
      this.title='\u2713';
      this.value = true;
  };
  
  checkbox.off = function() {
      this.backgroundColor = '#aaa';
      this.title='';
      this.value = false;
  };
  
  checkbox.addEventListener('click', function(e) {
      if(false == e.source.value) {
          e.source.on();
      } else {
          e.source.off();
      }
  });
  

  Regards
  Davide

• Undocumented APIs FTW!

  Simply add the following to your createSwitch function (Android only as far as I can tell, sorry iOS devs!):

  style:Titanium.UI.Android.SWITCH_STYLE_CHECKBOX

  So, for example, the following will create a checkbox instead of the standard switch:

  var basicSwitch = Titanium.UI.createSwitch({
      style:Titanium.UI.Android.SWITCH_STYLE_CHECKBOX,
      value:false
  });
  

  This GitHub commit to the SDK tipped me off (thank you Google!).

• Here's a no images required technique I'm trying out with a project.
  Works on iphone.

  //I use the character viewer in osx to pick the checkbox
  //you could use any symbol
  var checkbox = Ti.UI.createButton({
      title: '?',
      top: 10,
      right: 10,
      width: 30,
      height: 30,
      borderColor: '#666',
      borderWidth: 2,
      borderRadius: 15,
      backgroundColor: '#aaa',
      backgroundImage: 'none',
      color: '#fff',
      font:{fontSize: 25, fontWeight: 'bold'},
      value: false //value is a custom property in this casehere.
  });
  
  //Attach some simple on/off actions
  checkbox.on = function() {
      this.backgroundColor = '#159902';
      this.value = true;
  };
  
  checkbox.off = function() {
      this.backgroundColor = '#aaa';
      this.value = false;
  };
  
  checkbox.addEventListener('click', function(e) {
      if(false == e.source.value) {
          e.source.on();
      } else {
          e.source.off();
      }
  });
  

• There you go guys! Hope works for u

  
  var self = Ti.UI.createView({
          backgroundColor:'white'
      });
  
      var check_box = Ti.UI.createView({
          backgroundImage:'checkbox.png',
          width:20,
          height:20
      });
  
      check_box.addEventListener('click',function(){
  
          if(check_box.getBackgroundImage() == 'checkbox.png')
          {
              check_box.setBackgroundImage('checkbox-checked.png');
          }
          else if(check_box.getBackgroundImage() == 'checkbox-checked.png')
          {
              check_box.setBackgroundImage('checkbox.png');
          }
      });
  
      self.add(check_box);
  

  

  

• The only way I found was to fake it with images.

  var paidSwitch = Titanium.UI.createSwitch({
    top:240,
    left:50,
    value:false,
    visible:false
  });
  view.add(paidSwitch);
  var paidCheckbox = Titanium.UI.createImageView({
    image:'images/unchecked.png',
    width:30,
    height:30,
    top:240,
    left:50
  });
  paidCheckbox.addEventListener('click',function(e) {
    if(paidSwitch.value==false) {
      paidSwitch.value = true;
      paidCheckbox.image = 'images/checked.png';
    } else {
      paidSwitch = false;
      paidCheckbox.image = 'images/unchecked.png';
    }
  });
  view.add(paidCheckbox);
  

  You can use whatever you want for the checked/unchecked images. I ran a standard app in the emulator, took a screenshot, and cut out the checked/unchecked images with Photoshop. Here's what I created: checked and unchecked

  Tim

• It works better on android to not use the switch…

  var eachCheckbox = Titanium.UI.createImageView({
    image:'unchecked.png',
    width:30,
    height:30,
    top:toppos,
    left:5
  });
  
  eachCheckbox.addEventListener('click',function(e) {
    if(eachCheckbox.image== 'unchecked.png') {
      eachCheckbox.image = 'checked.png';
    } else {
      eachCheckbox.image = 'unchecked.png';
    }
  });
  

  Otherwise you can only check the box and uncheck it once.
  I haven't tested it on ipod.

• How would you implement this for a tableview…where there are multiple rows…and a checkbox in each of them??

  ~Brian

• Thanks Steven….this yields a box with a horizontal line in it that can be toggled. Wondering if there is a version with an actual checkmark?

• Thanks Steve…..we're still using mobile sdk 1.6.2 – so I will check it out in 1.7x (we're waiting for 1.8 to arrive to upgrade)

  ~Brian