64 thoughts on “Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and select boxes

  1. Martijn

    I haven’t tested this thouroghly, but I think stylish checkbox and radiobuttons can be achieved in pure css. It probably wouldn’t work in IE7, that we can mitigate with a script.

    Reply
    1. Stefan Gabos Post author

      check boxes and radio buttons can indeed be styled using only CSS3 but as far as Internet Explorer is concerned, it will work only in IE8+

  2. Makr

    I’m having an issue in IE8 doing:
    var zebra = new $.Zebra_TransForm();

    IE9 in IE8 mode produces “SCRIPT438: Object doesn’t support property or method ‘propertychange’ zebra_transform.js, line 2 character 1374”

    Reply
  3. tom

    I’d love to us this, but it doesn’t work with ’em-scaling’. or instance, add ‘style=”font-size:5em” to the example body tag. The text scales (and the positioning(yea!)). But the checkboxes/radio boxes etc. do not. In my case I have a scalable widget which I want to drive with font-sizes from 0.2em to 4em.

    Reply
    1. Stefan Gabos Post author

      what kind of issues? I just tried it with jQuery 1.9.0 and IE7 and it worked ok

  4. Russ

    Thank you for this plugin!!! I have a small issue:

    update_checkbox: function () {
      if ($(".zebra").length > 0) {
        self.checkboxes.refresh() <<-????
      }
    }
    
    init_ih_checkbox: function () {
      if ($(".Zebra_TransForm_Checkbox").length == 0) {
        self.checkboxes =  new  $.Zebra_TransForm($('input[type="checkbox"].zebra'));
      }
    }

    For some reason my ui is not updating when I change the value of my checkbox programmatically… I would like to force the ui to update or refresh some how…

    What is the best way

    Reply
    1. Stefan Gabos Post author

      i think you are right, there’s no way for handling that. i’ll look into it and come up with a fix this weekend. thanks!

    2. Stefan Gabos Post author

      the fix is to trigger the “change” event after manually checking a radio button; so, something like

      $('#somecheckbox').attr('checked', 'checked').trigger('change');
    3. Russ

      Thanks for the direction! After playing around for a while it turn out that you were right and I had an implementation detail that was getting in the way.

      Cheers!! and thanks again!

  5. Rich

    All works great but when the transform is active the form no longer sends the checkbox values, any ideas?

    Using jQuery 1.8.2

    Cheers and keep up the good work!

    Reply
    1. Stefan Gabos Post author

      I tried it in test version of Safari, Opera, Chrome, Firefox and as well as in IE7, 8, 9 & 10 and it worked everywhere…have you tried it with the examples from the downloadable package?

  6. Rich

    Stefan

    I’ve just sent a message, further to that.

    It works when you click on the label, just not the checkbox itself.

    Cheers

    Rich

    Reply
  7. Elvis

    Hi!

    Would it be possible to see a version without select boxes replacement? I would love to use it for radio/checkboxes only, but I already use another solution (Chosen) for select boxes which I can’t replace.

    Regards!

    Reply
    1. Stefan Gabos Post author
      $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"]'));
  8. dnes

    i want to have my own custom theme. could you please help me, i cannot find the image you have used i.e sprite.png

    Reply
  9. Dave

    I have a really stange issue on Chrome on Android – the checkboxes work initially, but if I scoll down/up then try and re-click them, they fail.

    It does not occur on this page however.

    It’s not a major problem, as I only need to style ‘selects’, but it would be nice to solve!

    Reply
  10. Dan

    Hi Stefan,

    The transformed checkboxes do not change to the unchecked state when a reset button in the form is clicked – although the data in the DOM is cleared as expected (no data is posted on submit)

    Is there a way to clear the checked state when a reset button is pressed?

    Thanks,

    DAn

    Reply
    1. Dan

      Hi Stefan,

      Found a solution, trigger change event on all checked elements:

      // update when reset button pressed
      $('button[type="reset"]').on( "click", function() {
      $('input[type="checkbox"]:checked').trigger('change');
      });

      Sorry to bother you!

      DAn

Leave a Reply

Your email address will not be published. Required fields are marked *