by ·0 Comments

I was looking at Newegg‘s checkout procedure and it had this cool check box where you could either check all or check none, and then when you clicked on a sub checkbox it would check or uncheck the check all checkbox if it didn’t meet that condition. I re-created the code in JQuery so I could use it on one of my projects.

The HTML markup:





Title






Trinity Mobile Bin Rack





Trinity Stainless Steel Work Table





Trinity NSF 5-Tier XL Heavy-Duty Commercial Chrome Shelving Rack

Ok, if you look at the markup, you’ll see that the table header has a checkbox with the id of ‘chkAll’. Then for all the items I have them with the class ‘chkbox’. It is important to note that the chkAll checkbox does NOT have the class ‘chkbox’.

The JQuery code:

 $(document).ready(function()
        {
			$("#chkAll").click(function()
			{
				var flag = $(this).is(':checked');
				$('input.chkbox').attr('checked',flag);
			});
			$('input.chkbox').click(function()
			{	
				var flag = true;
				$('input.chkbox').each(function()
				{
					flag = flag && $(this).is(':checked');
				});
				$("#chkAll").attr('checked',flag);
			});
        });

So how does it work? I make sure to call the functions only when the document is ready. Once that happens I attach a function to the clicking of the id ‘chkAll’. In this function I first check to see if the current chkAll checkbox is checked or not, if it is then I’m going to immediately make all the class ‘chkbox’ checkboxes to checked and vice versa.

The second function I have is if I happen to click one of the class ‘chkbox’ checkboxes, Again I attach a function to the click event. I use a JQuery expression .each- which is kinda like a foreach loop, which will loop through all the elements that satisfy my ‘chkbox’ class, I then create a variable that AND’s all the other element’s states. When it is done, I am able to determine if the chkAll checkbox should be checked or not.

See the demo

by ·0 Comments

I’ve always seen it done. Clearing the input field on focus.

JQuery seems to be pretty simple. Its just the syntax you have to get used to.

First the html markup


						

							

								
Sign up

Notice that for each input field I have an id, name, and alt attribute

Next integrating JQuery

Notice that I’m using googleapis to host the javascript. It seems that this is a better/faster alternative to hosting it directly on your host, plus google servers are most likely cached and will provide a better experience for the client.

Next building the JQuery plugin

		$.fn.clearSetFocus = function(iAttr)
		{
		}

We’re gonna create a namespace for ourselves. In my case, I named my function clearSetFocus. The $ creates a new JQuery object. you could also use jQuery(). So, I’ve created a new function named clearSetFocus and I’m taking in one parameter, called iAttr.

To actually attach this plugin to an element all I have to do is to call it.

Calling the plugin

$(document).ready(function(){
			$('#newsName').clearSetFocus('alt');
			$('#newsEmail').clearSetFocus('alt');
		});

Notice that I call the document.ready function before I add my plugin to the elements. I’ve found that if I don’t do that then the js could execute before the elements are loaded and make the script fail. So what I’ve done is create a new jQuery object for the element #newsName and attached the plugin clearSetFocus with the parameter alt.

Back to writing the plugin.

The plugin

//name my function clearSetFocus
		$.fn.clearSetFocus = function(iAttr)
		{
			//on focus
			this.focus(function()
			{
				if ($(this).val() == $(this).attr(iAttr))
				{
					$(this).val("");
				}
				
			//on blur - chained functionality	
			}).blur(function()
			{
				//get the value currently in the input
				if($(this).val().length==0)
				{
					//replace the value with the alt value
					$(this).val($(this).attr(iAttr));
				}
			});
		};

The this refers to my element that I’ve attached the plugin to. so in this case the element #newsName. I attach the function focus() – which allows me to add a function to when the user focus’ on the element. In this case, my logic is simply, if my value is the same as my alt value, then clear it. on blur() – which means to navigate away from the element, my logic is if the value’s length is 0, but the alt value back in.

Couple things to note.
.val() – this allows me to either get the value associated with the element
.val(“test”) – allows me to set the value of the element
.attr(“id”) – allows me to retrieve the value of the attribute of the element. so if the markup was

, I would get test

All done!