2011
02.01

Playing with jQuery UI checkbox and selectmenu

Category: Article / Tag: , ,  / Add Comment

jQuery UI checkbox and selectmenu

I’m workin’ on a project right now with some nice jQuery UI tweakings like customized checkbox and customized select drop down menus.
I tried some input element styling solutins, but I think I’ll go with jQuery UI as far as I can, because of its solidity, and at least it has documentation.

So my task was to created a drop down menu for Select All/Select None stuff.
First it sounds easy, but some obstacles will came along the way.

Let’s see what and how I did that.

I have a select like this:

1
2
3
4
5
6
<select id="selectAction" class="selectAction">
    <option name="none" value="none">None</option>
    <option name="read" value="read">Read</option>
    <option name="unread" value="unread">Unread</option>
    <option name="all" value="all">All</option>        
</select>

I have some checkboxes like this:

1
2
3
4
<input id="item-69" class="itemCheckbox" name="item[]" value="69" type="checkbox">
<input id="item-68" class="itemCheckbox" name="item[]" value="69" type="checkbox">
<input id="item-67" class="itemCheckbox" name="item[]" value="69" type="checkbox">
<input id="item-66" class="itemCheckbox" name="item[]" value="69" type="checkbox">

First let’s initialze the select menu:

1
2
3
4
$(document).ready(function()
{
    $('select.selectAction').selectmenu({'width':'125px','style':'dropdown'});
});

The following stuff will go inside the document ready thing, of course.

So let’s apply jQuery UI to the checkboxes as well, with this tiny code:

1
$("input:checkbox").checkbox();

Looks nice and clean, the only problem is, that from now on, we should forget that $(“input:checkbox”).attr(‘checked’,true);
Or I am lame, and I just can’t figured it out how can I did that. ;)

Anyway let’s get the things working!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$("select.selectAction").live('change',function()
{
    var action = $(this).val();

    switch( action )
    {
        case "all":    
            $('#inbox .inboxContentThreads input:checkbox').checkbox('check');
        break;
       
        case "read":
            $('#inbox .inboxContentThreads input:checkbox').checkbox('uncheck');
            $('#inbox .inboxContentThreads .read input:checkbox').checkbox('check');
        break;                     

        case "unread":
            $('#inbox .inboxContentThreads input:checkbox').checkbox('uncheck');
            $('#inbox .inboxContentThreads .unread input:checkbox').checkbox('check');
        break;                     

       
        case "none":
            $('#inbox .inboxContentThreads input:checkbox').checkbox('uncheck');
        break;                     
    }
});

See, that simple :)

It took me 5 hours to fully figure that out…

2 comments so far

Add Your Comment
  1. Rey said: 2012.04.27 16:33

    Bonjour,
    cela ne fonctionne pas chez moi !
    cette ligne $(“input:checkbox”).checkbox(); doit être dans la fonction ou pas ?
    et à quoi correspond #inbox ?, ainsi que .inboxContentThreads ?
    Vous auriez mis une petite démo cela aurait super, merci

  2. DjZoNe said: 2012.05.14 09:53

    Although I understand french, please use english here.

Your Comment