Checking all your checkboxes with jQuery

Ok I know this blog is geared towards ExtJS and I do expect you to lambast me for posting jQuery code snippets but, in my free time one lunch time I decided what it would be like to rewrite the ExtJS vertical checkbox examples I’ve been posting using jQuery.

Turns out, there’s not a great deal of difference in the length of the code, maybe the clarity and readability is slightly improved with jQuery, although looking at it there’s not a great deal in it. So for shits n giggles here’s my jQuery code:

<script type="text/javascript">

$(document).ready(function(){
$("#select_none").click(function(){
$(":checkbox").attr("checked", false);
$("#update_button").attr("disabled", true);
return false;
});

$("#select_all").click(function(){
$(":checkbox").attr("checked", true);
$("#update_button").attr("disabled", false);
return false;
});

// clear all checkboxes.
$("#select_none").click();

$(":checkbox").click(function(){
if($(this).attr("checked") == true)
{
if($("#update_button").attr("disabled")==true)
$("#update_button").attr("disabled", false);
}
else
{
if($(":checked").length == 0)
{
$("#update_button").attr("disabled", true);
}
}

})
});

FYI if you’re interested in checking out jQuery in more detail, have a look at the post over on Ajaxian filled with jQuery videos presented by John Resig himself.

svn: Inconsistent line ending style

open said file in a decent editor… make a small change…whitespace, is enough, resave it… job done…

Happened to me when I upgraded to Ext 2.1!

Setting HTML attributes easily with Ext JS

Well a short time since i last blogged I know, sorry about that… hello facebook readers – if there are any!

This wasn’t immediately obvious to me when I first started using the Ext JS library, but there is a really neat way of setting HTML attributes.

Firstly we need a DOM element to play with…(assuming you have got a simple page to play around with…)

var my-div = Ext.get('my-element');

then we go about setting its attributes…

my-div.set({

class :  'rounded-corners',

title : 'This is my example div'

});

Of course you could do the whole code in one call

Ext.get('my-element').set({

class :  'rounded-corners',

title : 'This is my example div'

});

Either way you choose I think its a really nice way of setting attributes…