Clearing checkbox inputs...

[DBookatay]

I'm a php guy, but know a little about javascripts, but am now officially stumped...

I "stole" a script from a site and implemented it into my site, but only half of the script is now working correctly.

 

Here is what it is supposed to do: It is a script that if you check the box, and hit submit it will take you to a page to compare the items.

That half works, but there is a second button that "clears" the check boxes, this doesnt work... No mater what I try!

 

The HTML checkbox (with a little php still mixed in there)

<input type="checkbox" class="capComp" onClick="javascript:checkChecked('.$stock.');" id="c'.$stock.'" name="c'.$stock.'">

("$stock" is a unique 5 digit number)

 

Without php it would look like this:

<input type="checkbox" class="capComp" onClick="javascript:checkChecked(18914);" id="c18914" name="c18914">

 

And the buttons:

<table>
<tr>
	<td class="compArr"><img src="images/Common/Icons/compBtm.gif" /></td>
	<td class="compTxt"><span id="chkCount">0 vehicles selected</span></td>
	<td class="compBtns">
		<img style="cursor:pointer;" id="clrBtn" onclick="clearChecks();" src="images/Common/BTNs/compClrOff.gif" /> 
		<img style="cursor:pointer;" id="cmpBtn" onclick="ptcp('CL=');" src="images/Common/BTNs/compSbmtOff.gif" />
	</td>
</tr>
</table>

 

And the java script:

function checkChecked(x) {
    var el = document.getElementById("CL");
    if(el){
        var comparisonList = el.value;
    if (eval("document.compare.c" + x + ".checked") == true) {    	    
        if (comparisonList.indexOf(x) == -1){
            if(comparisonList.length > 0)
    	            comparisonList += ",";
	        comparisonList += x;
	    }
    } else {
        if(comparisonList.indexOf(x) != -1){
            var splitList = comparisonList.split(",");
            var newCompareList = new Array();
            for(var i = 0; i < splitList.length; i++)
            {
                if(splitList[i] !=x )
                    newCompareList.push(splitList[i]);
            }
            comparisonList = "";
            for(var j = 0; j < newCompareList.length; j++)
            {
                if((j + 1) == newCompareList.length)
                    comparisonList +=  newCompareList[j]
                else
                    comparisonList += newCompareList[j] + ",";
            }
        } 
    }
    if(comparisonList == "")
        updateCheckCount(0);
    else
        updateCheckCount(comparisonList.split(",").length);
el.value = comparisonList;
}
}

function clearChecks() {
var hf = document.getElementById("CL");
if(hf) {
	var cl = new String(hf.value);
	var cls = cl.split(",");
	for(var i=0;i<cls.length;i++){
		var el = document.getElementById("b"+cls[i]);
		var chk = document.getElementById("c"+cls[i]);
		if(el && chk) {
			el.style.display = 'block';
			chk.checked = false; 
		}
	}
        hf.value = "";
        updateCheckCount(0);
    }
}

function updateCheckCount(x){
var elem = document.getElementById('chkCount');
if(elem) {
	if(x == 1) 
		elem.innerHTML = '<span style="font-size:11px; font-weight: bold; color: #ff0000">' + x + '</span> vehicle selected';
        else
		elem.innerHTML = '<span style="font-size:11px; font-weight: bold; color: #ff0000">' + x + '</span> vehicles selected';

	if(x < 2) {
		document.getElementById('clrBtn').src = '/images/Common/BTNs/compClrOff.gif';
		document.getElementById('cmpBtn').src = 'images/Common/BTNs/compSbmtOff.gif';
	} else if (x > 3) {
		alert('Only 3 vehicles may be selected at a time.\nPlease uncheck at least one vehicle.'); 
		document.getElementById('clrBtn').src = '/images/Common/BTNs/compClrOn.gif';
		document.getElementById('cmpBtn').src = 'images/Common/BTNs/compSbmtOff.gif';
	} else {
		document.getElementById('clrBtn').src = '/images/Common/BTNs/compClrOn.gif';
		document.getElementById('cmpBtn').src = '/images/Common/BTNs/compSbmtOn.gif';
	}
}
}

function ptcp(qs){
    var cl = "";
    var el = document.getElementById("CL");
    if(null != el)
    {
        if(el.value != ""){
            cl = el.value;
            var f = document.getElementById('compare');
            f.action = 'compare.php?' + qs + cl;

            f.submit();
        }
    }
}

 

Can anyone see a problem?

[DBookatay]

Here is  the site, to see the script in action:

http://www.carcityofdanbury.com/search.php?category=foreign

[phpQuestioner]

 

Have you even looked at this script in action on that web page/website? Because it does not work at all on there either. This is why you really should try to develop your own scripts; even if your new to javascript. You can always search the web for tutorial and examples (most with live demos) showing you how to do something like this.

[DBookatay]

The script does work, click 2 vehicles to compare

[phpQuestioner]

 

Yeah I tried that and it compares fine, but the clear all does not work. You better check that one again and you will see for yourself.

[DBookatay]

I know, thats what I am trying to get help with, the clearing of the checkboxes....

I do not understand why it will not clear all, it resets the "0 vehicles selected" text like it is supposed to, and resets the buttons to their origional state, but will not clear the check boxes.

 

Anyone have any ideas?

[phpQuestioner]

If you know how many checkboxes are on the page; do this:

 

<script language="javascript">

var checkboxtotal = 5; // Total Amount of Checkboxes You Want To Clear

function ClearAll()
{
for (i=0;i<=checkboxtotal;i++)
{
document.getElementsByTagName("input")[i].checked = false;
}
}

</script>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br><br>
<input type="button" value="Clear All" onclick="ClearAll()">