0

I've been themeing a big project lately and I was using icheck.js to style my checkboxes until I realized how slow it reacts to touches.

I realized that the way to go is css styling, however from what I saw, the checkbox needs either to be close or inside the label.

The label of each checkbox has a different width and/or height, and the checkbox needs to be floated right, so the have some variable distance between each other.

Any ideas, or any kind of script that runs super fast in touch devices?

scooterlord
  • 15,124
  • 11
  • 49
  • 68
  • If what I understand is correct, You wish to put equal padding between different lengthed labels and checkboxes. You should use table for that (easy way) and `align` right for ``s in which you put checkboxes. If what I understood looks wrong, Can you draw some doodle, please ? – Siva Tumma Dec 26 '13 at 13:52
  • here it is: http://img33.imageshack.us/img33/8153/f1zn.jpg As I said I need the checkboxes to be styled, not positioned. :/ – scooterlord Dec 26 '13 at 13:58
  • 1
    I hope [this](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) would give some better knowledge than what I have right now. – Siva Tumma Dec 26 '13 at 14:07
  • thanks. Although I have seen most of those urls posted as a solution, I will still look into it in case I find a solution! – scooterlord Dec 26 '13 at 14:37
  • http://stackoverflow.com/a/14058576/703717 – Danield Dec 26 '13 at 16:22

2 Answers2

1

You can do it with HTML / CSS and a bit of JS, but it's a bit tricky, and not very clean. First of all, you need to wrap your checkboxes with another HTML element (div or whatever) and hide your checkbox element (display: none).

Then, stylise the wrapper element to fit to your custom checkbox, with an unchecked state (as a default) and a checked state (use a class).

Finaly, use a bit of JS to manage clicks to the wrapper element. Working Fiddle, with jQuery (as i'm lazy) : 

$('.wrapperCheckbox').click(function () {
var checkbox = $(this).find('input[type="checkbox"]');
var checked;
$(this).toggleClass('checked');
if(checkbox.is(':checked')){
    checked = false;
}
else {
    checked = true;
}

checkbox.attr('checked', checked);        

});

http://jsfiddle.net/49Xg2/2/

As you can see, it's only about plugin the wrapper to its child checkbox and it surely will be lighter than using a lib for this. Note that I didn't test it, so it's probably wrong, but it shows you how to do it.

I know you don't wanna use JS, but you can't get your result only with HTML / CSS 100% working on all major browsers.

enguerranws
  • 8,087
  • 8
  • 49
  • 97
  • thanks for your answer. I will do some tests and see what happens. looks like that I will have to come to a compromise about this the way I see it. – scooterlord Dec 26 '13 at 15:15
  • how would this 'uncheck' the input? – scooterlord Dec 26 '13 at 15:18
  • I am not that advanced to implement the code, although I suppose it's something like if hasClass checked or something? can you elaborate by altering your code? – scooterlord Dec 26 '13 at 15:26
  • I did it, you just have to check if the child checkbox is checked with jQuery .is() method. In this case, .is('checked') will do the job. You can also check for .attr('checked',true), or the .prop('checked') on your child checkbox. – enguerranws Dec 26 '13 at 15:28
  • ..however this is not working as it should. It only applies the checked class but does not remove it :/ – scooterlord Dec 26 '13 at 15:36
  • Your code only changed the class to the parent wrapper and NOT the checkbox itself. Looks like I reached the fountain and can't drink! Please help me out with this! – scooterlord Dec 26 '13 at 15:53
  • :) http://jsfiddle.net/49Xg2/ , I made a mistake: .is(':checked') instead of .is('checked'). – enguerranws Dec 26 '13 at 16:00
  • ...and it's still not working. It applies the checked attribute to the input but it stays there. Please check the input element in your inspector. – scooterlord Dec 26 '13 at 16:04
  • It's weird, it's works fine the first three times, and stay checked... I'm on it. – enguerranws Dec 26 '13 at 16:08
  • one more strange thing is this. Since I also need an outside – scooterlord Dec 26 '13 at 16:10
  • Working now, still have no clue about what was going wrong. http://jsfiddle.net/49Xg2/2/ – enguerranws Dec 26 '13 at 16:21
  • I know this is a bit irrelevant but I am trying to use the each function because there are many checkboxes. Although you have answered my question would you care to implement this as well? I will post my code shortly – scooterlord Dec 26 '13 at 16:26
  • Looks like I am doing something wrong with the children http://jsfiddle.net/QmA5N/ Nope, my bad, seems to be working fine! – scooterlord Dec 26 '13 at 16:26
  • GRRR Sorry for this one, would you mind checking what's wrong with this one? http://jsfiddle.net/QmA5N/1/ I added a label and it's not working as it should! :/ – scooterlord Dec 26 '13 at 16:30
  • It toggles a class on wrapper and the checked state on input, so what doesn't work ? – enguerranws Dec 26 '13 at 16:38
  • I would expect clicking on the label would change the input as it should and then the wrapper should re-adjust. Now it toggles the wrapper and not the input itself – scooterlord Dec 26 '13 at 16:43
  • Just put the label in the wrapper. Or make another wrapper for the label + the checkbox wrapper and adapt the JS. – enguerranws Dec 26 '13 at 16:47
  • enguerranws, as you may have already realized, I am not THAT advanced with jquery yet. At least not for this kind of stuff. Would you care to elaborate once more? – scooterlord Dec 26 '13 at 16:48
  • There : http://jsfiddle.net/QmA5N/2/ I don't know why you used each() method by the way. – enguerranws Dec 26 '13 at 16:53
  • Let me rephrase the whole thing. This thing is intended for use with multiple checkboxes, that's why I used each. I don't know if there's any better way to do this. As you have done it right now, label toggles the input but not the background :/ – scooterlord Dec 26 '13 at 16:55
  • So, this is why I used each function: http://jsfiddle.net/QmA5N/3/ For more than one buttons, however, I can't make toggle to work – scooterlord Dec 26 '13 at 16:57
  • The jQuery object $('.wrapperCheckbox') contains all your .wrapperCheckbox elements. And everytime whatever .wrapperCheckbox will be clicked, it will run the code. each() is something else. – enguerranws Dec 26 '13 at 16:59
  • does this work ok for you? Here toggling every element changes the first. :/ – scooterlord Dec 26 '13 at 17:28
  • Yes it works, no reason that this would change only the first. – enguerranws Dec 26 '13 at 17:30
  • What would it take for the background to also change with the label? Now I see it works find, only the background stays the same. I guess this is the last thing that's left! – scooterlord Dec 26 '13 at 17:33
  • if you toggle using the background and then click on a toggle label other than the first, then the first background toggles :/ – scooterlord Dec 26 '13 at 17:33
  • for some strange reason I can't even get the first code to work on my site. It only toggles twice and then stops toggling.. DEAR GOD – scooterlord Dec 26 '13 at 17:38
  • I just noticed that you switched to an older jquery for this to work :/ In the latest it only toggles once. that's a problem – scooterlord Dec 26 '13 at 17:41
  • Really weird. I think label default event is f***ing the click() event we put. Consider sarhov 100% css technic down there, it will be cleaner. – enguerranws Dec 26 '13 at 17:47
  • Got it! http://jsfiddle.net/fX7Cp/ I replaced is(':checked') with is('[checked]'). Damn it, now we're done here. Two people working over something simple for the last two hours. How does that sound? – scooterlord Dec 26 '13 at 17:53
  • Well, this is not the solution : see it > http://jsfiddle.net/QmA5N/4/ I forgot label "for"... it needs to correspond to input id... :) All labels are pointing to #mine... – enguerranws Dec 26 '13 at 18:10
  • Have you seen my code? Mine works as I wanted it - as it should actually, and I can have the label OUTSIDE of the wrapper which is what I was after. – scooterlord Dec 26 '13 at 18:33
  • Yes, but the problem don't come from .is(':checked'), it comes from for="mine" on label, which target all checkbox on the example, that's why it was f**ing. And if you want a cleaner code, use this : http://jsfiddle.net/49Xg2/11/. Glad it works by the way :) – enguerranws Dec 27 '13 at 10:20
  • Hello again and happy holidays! New day, new problem. How can the same thing be achieved with radio buttons? – scooterlord Dec 27 '13 at 17:30
0

the same without java script using just label.

    input[type=checkbox] {
    display: none;
}
.wrapperCheckbox {
    width: 2em;
    height: 2em;
    background: red;
    display:block;
}
input[type=checkbox]:checked + label{

    background: blue;

}

http://jsfiddle.net/49Xg2/7/

Hovhannes Sargsyan
  • 1,063
  • 14
  • 25