Course notes 32
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

User Interface Elements - Check Boxes

Check Boxes are a little bit like toggle buttons but they are sometimes found in groups. When you click a check box it changes to its opposite (on or off).

Check boxes are like a combination of the toggle button and the radio button.

var ctx1, check1=0, check2=0, check3=0;
var checkBoxOne = new Image();
var checkBoxTwo = new Image();
var checkBoxThree = new Image();
	
checkBoxOne.src = "images/checkBoxOff.png";
checkBoxTwo.src = "images/checkBoxOff.png";
checkBoxThree.src = "images/checkBoxOff.png";

//add images into memory
var animal1 = new Image();
animal1.src = "images/animal1.jpg";
var animal2 = new Image();
animal2.src = "images/animal2.jpg";
var animal3 = new Image();
animal3.src = "images/animal3.jpg";

// ********* info about the checkBoxes ***************
	
var Boxspacing = 30;
var checkXPos = new Array;
var startCheckPos = 110;
for (i=0; i<=3; i++) {
	checkXPos[i] = startCheckPos+(i*Boxspacing);
}
var checkSize = 16;
var checkYPos = 320;
var checkYbottom = checkYPos + checkSize;
	
//*********************** initialization ************************************
function init(){
	
    canvas1 = document.getElementById('myCanvas1');
    ctx1 = canvas1.getContext('2d');

	drawBackground();
   
	canvas1.addEventListener('click', doClick, false);
}

//*************************** offset functions *******************************

function findOffset(obj) {
    var curX = 0;
    var curY = 0;
    if (obj.offsetParent) {   
        do {
            curX += obj.offsetLeft;  
            curY += obj.offsetTop;   
        } while (obj = obj.offsetParent);      
        return {x:curX, y:curY};  
	}
}

//*************************** draw the backgrounds *******************************

function drawBackground () {
	
//make a background color
	ctx1.fillStyle='black';
	ctx1.fillRect(0,0,320,480);
	
//write the captions
	ctx1.font = "20pt Arial";
	ctx1.fillStyle = "Red";
	ctx1.fillText("Check Boxes", 70, 300);
		
//draw 3 check boxes	
	ctx1.drawImage(checkBoxOne, checkXPos[0], checkYPos, checkSize, checkSize);
	ctx1.drawImage(checkBoxTwo, checkXPos[1], checkYPos, checkSize, checkSize);
	ctx1.drawImage(checkBoxThree, checkXPos[2], checkYPos, checkSize, checkSize);	
}

//******************** turn checkBox buttons on/off *******************************

function selectCheckbox(boxNum) {
	ctx1.fillStyle="black";
	if (boxNum==1) {
		if (check1==0) {
			checkBoxOne.src = "images/checkBoxOn.png";
			animal1.src = "images/animal1.jpg";
			ctx1.drawImage(checkBoxOne, checkXPos[0], checkYPos, checkSize, checkSize);
			ctx1.drawImage(animal1, checkXPos[0]-100, checkYPos+30, 83, 65);
			check1=1;
		} else {
			checkBoxOne.src = "images/checkBoxOff.png";
			ctx1.drawImage(checkBoxOne, checkXPos[0], checkYPos, checkSize, checkSize);	
			ctx1.fillRect(checkXPos[0]-100, checkYPos+30, 83, 65);  
			check1=0;
		}		
	} else if (boxNum==2) {
		if (check2==0) {
			checkBoxTwo.src = "images/checkBoxOn.png";
			animal2.src = "images/animal2.jpg";
			ctx1.drawImage(checkBoxTwo, checkXPos[1], checkYPos, checkSize, checkSize);
			ctx1.drawImage(animal2, checkXPos[1]-20, checkYPos+30, 83, 65);
			check2=1;
		} else {
			checkBoxTwo.src = "images/checkBoxOff.png";
			ctx1.drawImage(checkBoxTwo, checkXPos[1], checkYPos, checkSize, checkSize);	
			ctx1.fillRect(checkXPos[1]-20, checkYPos+30, 83, 65);
			check2=0;
		}		
	} else if (boxNum==3) {
		if (check3==0) {
			checkBoxThree.src = "images/checkBoxOn.png";
			animal3.src = "images/animal3.jpg";
			ctx1.drawImage(checkBoxThree, checkXPos[2], checkYPos, checkSize, checkSize);
			ctx1.drawImage(animal3, checkXPos[2]+60, checkYPos+30, 83, 65);check3=1;
		} else {
			checkBoxThree.src = "images/checkBoxOff.png";
			ctx1.drawImage(checkBoxThree, checkXPos[2], checkYPos, checkSize, checkSize);	
			ctx1.fillRect(checkXPos[2]+60, checkYPos+30, 83, 65);
			check3=0;
		}		
	}
}

//***********************Figure out where the click is ************************
function doClick(e) {

    //*******Include this*******
	var offset = findOffset(canvas1);    
    var posX = e.pageX - offset.x;     
    var posY = e.pageY - offset.y;     
 
//You need to figure out where the click is
if ((posX >= checkXPos[0]) && (posX < checkXPos[0]+checkSize)&&(posY >= checkYPos) && (posY < checkYbottom)) 
{
  selectCheckbox(1);	
} else if ((posX>=checkXPos[1])&&(posX < checkXPos[1]+checkSize)&&(posY>=checkYPos)&&(posY < checkYbottom)) {
	selectCheckbox(2);	
} else if ((posX >= checkXPos[2])&&(posX < checkXPos[2]+checkSize)&&(posY >= checkYPos)&&(posY < checkYbottom)) {
	selectCheckbox(3);	
}		
}
 

Click to see the Check Box example in its own page (view the source)

Click to see toggle, checkboxes and radio buttons combined (view the source)