Question

The following code works fine when selecting all checkboxes, however it uses the the input type of button. How could i change this into an anchor (eg. like a link) instead of an input type of button. This needs to update to UnCheck All once all are selected. I have tried using the innerHTML placing it within a DIV, however have not been successful. I would be grateful for any help like always.

Many thanks

<script language="JavaScript">
function Check(chk)
{
if(document.myform.Check_All.value=="Check All"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
document.myform.Check_All.value="UnCheck All";
}else{

for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
document.myform.Check_All.value="Check All";
}
}

// End -->
</script>
<form name="myform" action="checkboxes.asp" method="post">


<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>

<input type="button" name="Check_All" value="Check All" onClick="Check(document.myform.check_list)"> 



</form>

Answer 1

I first thought up of a quick answer but then I noticed that this will suck pretty badly
because it’s completely braindead if someone manually ticks the checkboxes.

<form name="myform" action="checkboxes.asp" method="post">
<input type="checkbox" name="check_list" value="1">apple<br>
<input type="checkbox" name="check_list" value="2">banana<br>
<input type="checkbox" name="check_list" value="3">pear<br>
</form>

<div id="checker">Check All</div>

<script type ="text/javascript">
//The toggle code for the div itself
$("#checker").bind("click", function() {
    var toggleState = !! jQuery.data(this, "togglestate");

    $(document.myform.check_list).each(function() {
    this.checked = !toggleState;
    });


    $(this).text(toggleState ? "Check All" : "UnCheck All");
    jQuery.data(this, "togglestate", !toggleState);
});

//Keep track of manual ticking of the checkboxes
//- if all checkboxes are ticked manually, change to uncheck all
//- if all checkboxes are unticked manualy, change to check all

$(document.myform).delegate("input[name=check_list]", "change", function() {
    var curState, prevState, fullStateChange = true;

    //Iterate through the checkboxes to see if all are unticked or if all are ticked
    $(document.myform.check_list).each(function() {
    curState = this.checked;

    if (prevState != null && prevState !== curState) {
        fullStateChange = false;
    }

    prevState = curState;
    });

    //Return as some were ticked and some were not
    if (!fullStateChange) {
    return;
    }

    $("#checker").data("togglestate", curState).text(!curState ? "Check All" : "UnCheck All");

});

//React to initial state of the checkbuttons
$(document.myform.check_list).trigger( "change" );
</script>

Demo

http://jsfiddle.net/rBaUM/2/